Nordic Blocks

Stop hand-coding the same sections for every client project. Nordic Blocks gives you 22 professionally built content blocks — the ones Concrete CMS doesn't ship with — so you can assemble modern, conversion-ready pages in minutes instead of hours.

One install. One consistent design language. Works with any v9 theme.

See all 22 blocks in action → Live Demo

What's inside

Nordic Blocks covers the content sections that every business website needs but Concrete's core blocks don't provide:

• Pricing Table — Side-by-side plan comparison with feature rows, highlighted "recommended" column, and a monthly/annual toggle. 3 templates: default columns, pill-style toggle switcher, and compact horizontal rows.
• Testimonial — Customer quote with photo, star rating, and attribution. 3 templates: single card, centered carousel-ready, and compact grid card with author top-row.
• Team Member — Photo, name, title, bio, and sortable social links. 3 templates: centered card, horizontal list row, and CSS 3D flip card with bio on the back.
• Stats Counter — Animated number counters that count up on scroll. Configurable prefix/suffix ($, %, +). Font Awesome icon picker with color for the icon-boxed template. 3 templates: horizontal row, vertical rows with divider, and icon-boxed cards.
• FAQ Accordion — Expandable question/answer pairs with optional Schema.org FAQPage markup for Google rich results. 3 templates: minimal lines, numbered bordered cards, and side-by-side two-column layout.
• CTA Section — Full-width call-to-action with heading, subheading, dual buttons, and background image with overlay control. 3 templates: centered dark, split text/image, and compact inline bar.
• Feature Cards — Repeatable icon + title + description cards with built-in Font Awesome 5 icon picker and per-icon color picker. 4 templates: icon-top centered grid, icon-left stacked list, numbered steps with connecting line, and hover-lift cards.
• Logo Showcase — Client or partner logos from a file set. Grayscale-to-color hover effect. 3 templates: flex wrap, bordered grid cells, and infinite CSS marquee scroll.
• Timeline — Vertical timeline for milestones, company history, or project roadmaps. 3 templates: alternating left/right, left-aligned, and horizontal scrolling.
• Alert / Notice — Configurable notification bar (info, success, warning, danger) with optional dismiss button and CTA link. 3 templates: left-border bar, rounded card with icon badge, and compact inline pill.
• Before / After Image — Draggable slider to compare two images. Touch and keyboard accessible. 3 templates: horizontal slider, vertical slider, and static side-by-side.
• Content Tabs — Tabbed content sections with full ARIA keyboard navigation. 4 templates: horizontal underline tabs, vertical sidebar tabs, collapsible accordion, and rounded pill selector.
• Hero Banner — Full-width hero section with heading, subheading, dual CTA buttons, and background image with overlay opacity control. Perfect for landing pages and section openers. 3 templates: default centered overlay, split text/image grid, and minimal solid-color.
• Process Steps — Numbered step-by-step sections for onboarding flows, how-it-works guides, or service breakdowns. Each step has a number, title, and description. 3 templates: default grid cards, vertical timeline with connecting line, and arrow-connected bordered cards.
• Image Gallery — Responsive image grid with built-in lightbox. Select images from Concrete's file manager. Configurable columns and gap spacing. 3 templates: default grid, CSS-column masonry, and horizontal scroll carousel.
• Countdown Timer — Live countdown to a target date and time. Displays days, hours, minutes, and seconds with customizable heading and expired message. 3 templates: default card segments, circular SVG progress rings, and compact inline text.
• Contact Info Card — Business contact details card with inline SVG icons for phone, email, address, website, and business hours. Clean, scannable layout for contact pages and sidebars. 3 templates: default vertical card, horizontal card with side-by-side map, and compact inline bar.
• Video Embed — Responsive video player supporting YouTube, Vimeo, and self-hosted MP4. Configurable aspect ratio and privacy-mode poster. 3 templates: default embed, shadow-lifted card, and edge-to-edge fullwidth.
• Menu / Price List — Categorized menu items with name, description, price, and dietary labels. Perfect for restaurants, cafés, and service pricing. 3 templates: default dotted-line classic, two-column newspaper layout, and bordered item cards.
• Progress Bars — Animated horizontal progress bars that fill on scroll. Configurable label, percentage, and custom color per bar. 3 templates: default flat bars, animated striped bars, and circular SVG gauges.
• Comparison Table — Side-by-side feature comparison with automatic check/cross icons. Two named columns with optional highlight. 3 templates: default table, stacked feature cards, and highlight with winner badge.
• Animated Heading — Eye-catching headline with rotating words. Supports typewriter, fade, and slide animations. Configurable heading tag, alignment, and speed. 3 templates: default accent color, gradient text, and underline decoration.

That's 22 blocks × 68 total templates, all from a single package install.

Built different

• Zero jQuery. Every line of front-end JavaScript is vanilla ES6+. No runtime dependencies. No conflicts with your theme's scripts. Just clean, modern code.
• Truly accessible. Full ARIA roles on every interactive block. Keyboard navigation for accordions, tabs, carousels, and the image comparison slider. prefers-reduced-motion respected throughout — animated counters show instant values, carousels pause, flip cards stack.
• Theme-agnostic. CSS inherits your theme's colors via Bootstrap 5 custom properties with sensible fallbacks. Works with Atomik, Motif, Modena, and custom themes. A dashboard color picker lets you override the accent color globally for non-Bootstrap themes.
• SEO built in. The FAQ block outputs Schema.org FAQPage JSON-LD automatically, eligible for Google's rich results. Toggle it on or off per block instance.
• Cache-friendly. Every block enables Concrete's output caching with proper invalidation. Your pages stay fast.
• Editor-friendly. Drag-to-reorder repeatable items (plans, FAQ entries, timeline events, social links). Clean edit dialogs that match Concrete's native UI patterns. Uses Concrete's file manager for all image selectors.
• Lightweight. No bundled CSS frameworks, no icon font libraries, no build tools required. Scoped CSS under .nordic-* means zero style leaks.
• Demo content included. One-click install from Dashboard → System & Settings → Nordic Blocks creates a showcase page with all 22 blocks across all 68 template variants, complete with sample text, Font Awesome icons, and SVG placeholder images. Fully removable.

Who is this for?

Freelancers and agencies building client sites on Concrete CMS who are tired of recreating the same pricing tables, team grids, and FAQ sections from scratch for every project.

Site owners who want to add professional content sections without hiring a developer or learning HTML.

Theme developers who want a reliable block pack to recommend alongside their themes, knowing it won't break the design.

Technical specs

• Requires: Concrete CMS 9.3.0 or higher
• PHP: 8.1 – 8.5
• Blocks: 22
• Custom templates: 46 (68 total including defaults)
• Database tables: 32 (auto-created on install, fully removed on uninstall)
• Dependencies: None (vanilla JS, scoped CSS, no external libraries)
• Dashboard page: Settings for accent color override, Schema.org toggle, and animation duration
• Block type set: All blocks appear in a dedicated "Nordic Blocks" set in the Add Panel
• Caching: All blocks support output caching
• Translation: All strings wrapped in t() for i18n readiness

Changelog

0.9.0 — Initial release with 22 blocks and 68 templates. Font Awesome icon picker (Feature Cards, Stats Counter, Process Steps). One-click demo content installer. Dashboard settings page.