Cards & Features
Display content as cards and lists: Highlight for highlighted key facts with title, text and link, Benefits as a compact advantage list, Features with detailed rich text descriptions, Icon Cards with linked icons and the Overview module (Tabs) for cards with rich text, CTA and icon — displayable as carousel or grid.
Highlight
The Highlight Module displays highlighted points as cards with title, description text (plain text, no richtext) and optional link. Minimum 2, maximum 4 elements. In the CMS backend an SVG icon can optionally be uploaded — this is currently not rendered in the frontend. Ideal for key facts, USPs or core statements.
40+ Modules
Ready-made modules for every use case — from hero stages to pricing tables.
Accessibility
WCAG 2.1 AA standard based on shadcn/ui and Radix UI primitives.
Design Token System
Change one set of tokens and the entire website adapts.
Benefits
The Benefits Module displays advantages as a compact list with title, optional link and optional icon. No description text, no richtext — just concise keywords. Links are optional — with a link the entire card becomes clickable. Icons are uploaded in the CMS backend and displayed next to the title.
Multilingualism
SEO Optimised
Automatic Image Optimisation
Storybook Integration
TypeScript
Tailwind CSS 4
Accessibility (WCAG 2.1 AA)
Responsive Design
Features
The Features Module displays feature descriptions as cards with title and richtext. Unlike Benefits, more detailed texts with formatting can be stored here. On mobile the display automatically switches to a carousel.
Contact Module
Contact Teaser, Detail, List and Author — centrally maintained contacts in different module views. Learn more here.
Media Module
Video player with YouTube and HTML5, image gallery with lightbox, zoom and slideshow, plus carousel with art direction. Learn more here.
Quote Module
Single quotes with image or video, quote collections as grid or carousel, plus avatar and image variants with initials fallback. Learn more here.
Event System
Bento box, grid list with filters, featured event and selected detail for editorial pages. Learn more here.
Performance
Server-side rendering, automatic code splitting, ISR-based caching and optimised image delivery. Core Web Vitals stay in the green.
Override System
Project-specific modules override shared modules. Icons, layouts and slots can be customised per app while the shared base remains updateable.
Design Token System
CSS-first configuration with Tailwind CSS 4 and Style Dictionary. OKLCH color system, component-specific token files and a Figma-to-code workflow.
Clean Architecture
Five-layer separation with dependency injection: entities, application, infrastructure, interface adapters and frameworks — cleanly separated and testable.
Icon Cards
Icon Cards display content as cards with icon, title and optional link. With a link the entire card becomes clickable. On mobile the display automatically switches to a carousel with peek effect.
Overview — Carousel
The Overview Module (Tabs) organises cards in tabs. Each card has a title, richtext editor, optional CTA button and optional SVG icon. In the display type "Carousel" the cards are displayed as a slider on mobile and as a grid on desktop.
Core Web Vitals
All metrics in the green: LCP, FID and CLS are automatically optimised by the architecture.
Lightning-Fast Load Times
Server-side rendering, automatic code splitting and optimised caching.
Image Optimisation
Automatic formats, lazy loading and art direction for optimal load times.
Caching Strategy
ISR serves pages near-instantly – plus unstable_cache, React cache() and CDN. TanStack Query handles client-side caching for optimistic updates.
Next.js App Router
Server Components, streaming and partial pre-rendering for optimal time to first byte.
Overview — Grid
The same Overview Module in the display type "Grid" — here the cards per tab are displayed as a static grid. The carousel options are not relevant in grid mode.
Monorepo
Turborepo with shared package and project-specific apps.
CI/CD
Automated tests, linting and build validation in the pipeline.
Storybook
Living component documentation with interaction tests.