Card Karte
Einführung
Ein hochgradig vielseitiger Layout-Container, der darauf ausgelegt ist, verwandte Informationen, Aktionen, Medien und Metadaten in einem einzigen visuell strukturierten Modul zu gruppieren. Er umfasst vorgesehene Bereiche für Kopfzeilen, Titel, Beschreibungen, Fließtext, Avatare, Titelbilder, Aktionen und Fußzeilen.
Die Card-Komponente ist vollständig als card-Block im Page Builder integriert, sodass Inhaltsautoren und Entwickler Layoutstrukturen, Oberflächenvarianten und responsives Format direkt im CMS konfigurieren können.
Verwendung
Diese Beispiele veranschaulichen, wie Inhaltsredakteure Kartenkomponenten binden und strukturieren.
1. Erhöhte Projekt-Übersichtskarte
Eine klassische erhöhte Profilkarte mit Titel, Beschreibung, Fließtext und einer primären Aktionsschaltfläche im Fußzeilen-Slot.
{
"type": "card",
"title": "Project Launchpad",
"description": "Accelerate your workflow development",
"body": "Create, configure, and scale multi-platform applications seamlessly. Our cloud-native environment is optimized for high performance, serverless routing, and automatic localized static site generation.",
"variant": "elevated",
"boxShadow": "lg",
"children": [
{
"type": "button",
"text": "View Project",
"variant": "solid"
}
]
}
Project Launchpad
2. Medienreiche Deckbildkarte mit Top-Bild
Rendert eine konturierte Karte mit einem großen visuellen Deckbild, das oben am Inhaltskörper ausgerichtet ist. Perfekt für Blogbeiträge, News-Grids oder Produkt-Highlights.
{
"type": "card",
"image": "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=600&auto=format&fit=crop",
"imagePosition": "top",
"title": "Design Systems in Production",
"body": "Explore optimal architectural patterns for managing multi-variant design tokens, static compilation, and robust hydration frameworks in large engineering organizations.",
"variant": "outline"
}
Design Systems in Production
Eigenschaften
| Eigenschaft | CMS-Feldtyp | Standard | Beschreibung / Unterstützte Optionen |
|---|---|---|---|
Kartentitel (title) | string | - | Die im Kopfbereich der Karte angezeigte Hauptüberschrift. |
Kartenbeschreibung (description) | string | - | Unterstützende Sekundär-Unterzeile unterhalb des Titels. |
Fließtext (body) | string | - | Hauptinhalt des Textblocks, der im Kartenkörper gerendert wird. |
Titelbild (image) | image | - | URL oder Medienpfad für die begleitende Grafik oder das Foto. |
Bildplatzierung (imagePosition) | select | "top" | Layout-Ausrichtung der Deckgrafik. • Optionen: "top", "bottom", "left", "right". |
Visuelle Variante (variant) | select | "elevated" | Rahmen- und Schattenstil. • Optionen: "elevated", "outline", "subtle". |
Schattentiefe (boxShadow) | select | "sm" | Auf den äußeren Rahmen angewandter Theme-Schatten. • Optionen: "none", "2xs", "xs", "sm", "md", "lg", "xl", "2xl". |
Clip-Grenzen (overflow) | select | "hidden" | Overflow-Richtlinie. Setzen Sie auf "visible", wenn die Karte nicht portalisierte Overlay-Elemente (Dropdowns, Popovers, DatePicker) verschachtelt, um Layout-Abschneidungen zu verhindern. |
Entwicklerhinweise & Barrierefreiheit
- Hydration-Insel: Standardmäßig kompilieren Karten zu leichten, rein präsentativen Statik-Elementen. Enthalten sie jedoch aktive interaktive Kind-Blöcke oder explizite Zustands-Trigger, hydrieren sie clientseitig als bedingte Tier-2-Insel.
- WAI-ARIA-Konformität: Karten sind so strukturiert, dass sie logische Inhalts-Lesereihenfolgen erzwingen. Verwenden Sie semantische Überschriften (
h2-h4) für Titel-Slots. Stellen Sie sicher, dass dekorative Deckbilder mit entsprechenden leeren Alt-Tags versehen sind, damit Screenreader sie elegant überspringen.