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.
Frequently Asked Questions about Cards & Features
Highlight: Title, plain text, link (entire card clickable), SVG icon upload (currently not rendered). Benefits: Title, link (entire card clickable) and optional icon (rendered). Icon Cards: Title, link (entire card clickable), icon as image. Features: Title and rich text (links only within the text, the card itself cannot be linked as a whole). Overview Cards: Title, rich text and optional CTA button.
Yes. Highlight, Benefits, Features, Icon Cards and the Overview module all include an integrated intro with headline (selectable headline type), subline, intro text (rich text), intro alignment and CTAs.
Highlight and Benefits remain as a grid on mobile (1 column, 2 columns from tablet), with no carousel. Features and Icon Cards automatically switch to a carousel on mobile. This behaviour is not configurable. Icon Cards show a peek effect (80% width), making the next card partially visible.
The Overview module organises cards in tabs. Each tab contains a collection of cards with title, rich text and an optional CTA. Two display types: Carousel shows the cards per tab as a swipeable slider with navigation, dots and autoplay. Grid shows all cards of a tab as a static grid. The module includes its own intro.
Cards with an icon (uploaded as an image in the CMS backend), title and optional link. Ideal for service overviews, feature descriptions or navigation tiles. Without an icon the card is still displayed.
Highlight shows cards with title, description text (plain text, not rich text) and an optional link. An SVG icon can be uploaded in the backend, which is currently not rendered in the frontend. Minimum 2, maximum 4 elements. Benefits is a compact list with title, optional link and optional icon (rendered), without description text. Features offers cards with title and rich text, for more detailed descriptions with formatting.
Seven link classes are available for the CTA button: Button Primary, Button Secondary, Button Outline, Button Ghost, Button Ghost with Icon, Inline Link and Inline Link with Icon.
Icon Cards: Yes. With a configured link the entire card becomes clickable. Features: No. The cards themselves have no link field. Links can only be set within the rich text editor.