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
Fertige Komponenten für jeden Anwendungsfall — von Hero-Stages bis Preistabellen.
Accessibility
WCAG 2.1 AA Standard mit shadcn/ui und Radix UI Primitives als Basis.
Design Token System
Ein Satz Tokens ändern und der gesamte Webauftritt passt sich an.
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 und Author — zentral gepflegte Kontakte in verschiedenen Darstellungen. Mehr dazu hier.
Media Module
Video Player mit YouTube und HTML5, Image Gallery mit Lightbox, Zoom und Slideshow, Carousel mit Art Direction. Mehr dazu hier.
Quote Module
Einzelzitate mit Bild oder Video, Zitat-Sammlungen als Grid oder Carousel. Avatar- und Image-Varianten mit Initialen-Fallback. Mehr dazu hier.
Event System
Bento Box, Grid List mit Filtern, Featured Event und Selected Detail für redaktionelle Seiten. Mehr dazu hier.
Performance
Server-Side Rendering, automatisches Code-Splitting, Quad-Layer Caching und optimierte Bildauslieferung. Core Web Vitals im grünen Bereich.
Override System
Projektspezifische Components überschreiben Shared Components. Icons, Layouts und Slots können pro App angepasst werden — die Basis bleibt updatefähig.
Design Token System
CSS-first Konfiguration mit Tailwind CSS 4 und Style Dictionary. OKLCH Farbsystem, Component-spezifische Token Files und Figma-zu-Code Workflow.
Clean Architecture
5-Layer Separation mit Dependency Injection. Entities, Application, Infrastructure, Interface Adapters und Frameworks — sauber getrennt und testbar.
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
Quad-layer caching: unstable_cache, React cache(), TanStack Query and CDN.
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.