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 Module 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 und Selected Detail für redaktionelle Seiten. Mehr dazu hier.
Performance
Server-Side Rendering, automatisches Code-Splitting, ISR-basiertes Caching und optimierte Bildauslieferung. Core Web Vitals im grünen Bereich.
Override System
Projektspezifische Module überschreiben Shared Module. 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
ISR liefert Seiten nahezu verzögerungsfrei aus – plus unstable_cache, React cache() und CDN. TanStack Query übernimmt clientseitiges Caching für optimistic Updates.
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.
Häufige Fragen zu Cards & Features
Highlight: Titel, Plain Text, Link (ganze Karte klickbar), SVG-Icon Upload (aktuell nicht gerendert). Benefits: Titel, Link (ganze Karte klickbar) und optionales Icon (wird gerendert). Icon Cards: Titel, Link (ganze Karte klickbar), Icon als Bild. Features: Titel und Richtext (Links nur im Text möglich, Karte nicht als Ganzes verlinkbar). Overview Cards: Titel, Richtext und optionaler CTA-Button.
Ja. Highlight, Benefits, Features, Icon Cards und das Overview Modul bringen alle ein integriertes Intro mit Headline (wählbarer Headline-Type), Subline, Introtext (Richtext), Intro Alignment und CTAs.
Highlight und Benefits bleiben auch auf Mobile als Grid (1 Spalte, ab Tablet 2 Spalten), nicht als Carousel. Features und Icon Cards wechseln auf Mobile automatisch zum Carousel. Dieses Verhalten ist nicht konfigurierbar. Icon Cards zeigen dabei einen Peek-Effekt (80% Breite), sodass die nächste Karte angeschnitten sichtbar ist.
Das Overview Modul organisiert Karten in Tabs. Jeder Tab enthält eine Sammlung von Cards mit Titel, Richtext und optionalem CTA. Zwei Display Types: Carousel zeigt die Karten pro Tab als swipebaren Slider mit Navigation, Dots und Autoplay. Grid zeigt alle Karten eines Tabs als statisches Raster. Das Modul bringt ein eigenes Intro mit.
Karten mit einem Icon (als Bild im CMS Backend hochgeladen), Titel und optionalem Link. Ideal für Service-Übersichten, Leistungsbeschreibungen oder Navigations-Kacheln. Ohne Icon wird die Karte trotzdem angezeigt.
Highlight zeigt Karten mit Titel, Beschreibungstext (Plain Text, kein Richtext) und optionalem Link. Im Backend kann ein SVG-Icon hochgeladen werden, das aktuell im Frontend nicht gerendert wird. Mindestens 2, maximal 4 Elemente. Benefits ist eine kompakte Liste mit Titel, optionalem Link und optionalem Icon (wird gerendert), ohne Beschreibungstext. Features bietet Karten mit Titel und Richtext, für ausführlichere Beschreibungen mit Formatierung.
Für den CTA-Button stehen sieben Link Classes zur Verfügung: Button Primary, Button Secondary, Button Outline, Button Ghost, Button Ghost with Icon, Inline Link und Inline Link with Icon.
Icon Cards: Ja. Mit gepflegtem Link wird die ganze Karte klickbar. Features: Nein. Die Karten selbst haben kein Link-Feld. Links können nur innerhalb des Richtext-Editors gesetzt werden.