Cards & Features
Inhalte als Karten und Listen darstellen: Highlight für hervorgehobene Key Facts mit Titel, Text und Link, Benefits als kompakte Vorteilsliste, Features mit ausführlichen Richtext-Beschreibungen, Icon Cards mit verlinkten Icons und das Overview Modul (Tabs) für Karten mit Richtext, CTA und Icon — als Carousel oder Grid darstellbar.
Highlight
Das Highlight Modul zeigt hervorgehobene Punkte als Karten mit Titel, Beschreibungstext (Plain Text, kein Richtext) und optionalem Link. Mindestens 2, maximal 4 Elemente. Im CMS Backend kann optional ein SVG-Icon hochgeladen werden — dieses wird aktuell im Frontend nicht gerendert. Ideal für Key Facts, USPs oder zentrale Aussagen.
40+ Module
Fertige Komponenten für jeden Anwendungsfall — von Hero-Stages bis Preistabellen.
Barrierefreiheit
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
Das Benefits Modul zeigt Vorteile als kompakte Liste mit Titel, optionalem Link und optionalem Icon. Kein Beschreibungstext, kein Richtext — nur prägnante Schlagworte. Links sind optional — mit Link wird die ganze Karte klickbar. Icons werden im CMS Backend hochgeladen und neben dem Titel angezeigt.
Mehrsprachigkeit
SEO-optimiert
Automatische Bildoptimierung
Storybook Integration
TypeScript
Tailwind CSS 4
Barrierefreiheit (WCAG 2.1 AA)
Responsive Design
Features
Das Features Modul zeigt Feature-Beschreibungen als Karten mit Titel und Richtext. Im Gegensatz zu Benefits können hier ausführlichere Texte mit Formatierung hinterlegt werden. Auf Mobile wechselt die Darstellung automatisch zum 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, Selected Detail für redaktionelle Seiten und Location Map mit Google Maps. 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 zeigen Inhalte als Karten mit Icon, Titel und optionalem Link. Mit Link wird die ganze Karte klickbar. Auf Mobile wechselt die Darstellung automatisch zum Carousel mit Peek-Effekt.
Overview — Carousel
Das Overview Modul (Tabs) organisiert Karten in Tabs. Jede Card bringt Titel, Richtext-Editor, optionalen CTA-Button und optionales SVG-Icon mit. Im Display Type „Carousel“ werden die Karten auf Mobile als Slider dargestellt, auf Desktop als Grid.
Core Web Vitals
Alle Metriken im grünen Bereich: LCP, FID und CLS werden durch die Architektur automatisch optimiert.
Blitzschnelle Ladezeiten
Server-Side Rendering, automatisches Code-Splitting und optimiertes Caching.
Bildoptimierung
Automatische Formate, Lazy Loading und Art Direction für optimale Ladezeiten.
Caching Strategie
Quad-Layer Caching: unstable_cache, React cache(), TanStack Query und CDN.
Next.js App Router
Server Components, Streaming und Partial Prerendering für optimale Time to First Byte.
Overview — Grid
Das gleiche Overview Modul im Display Type „Grid“ — hier werden die Karten pro Tab als statisches Raster dargestellt. Die Carousel-Optionen sind im Grid-Modus nicht relevant.
Monorepo
Turborepo mit Shared Package und projektspezifischen Apps.
CI/CD
Automatisierte Tests, Linting und Build-Validierung in der Pipeline.
Storybook
Lebende Component-Dokumentation mit Interaction Tests.