Card
Introduction
A highly versatile layout container designed for grouping related information, actions, media, and metadata into a single visually structured module. It includes designated areas for headers, titles, descriptions, body text, avatars, cover imagery, actions, and footers.
The Card component is fully integrated as a card block in the Page Builder, allowing content authors and developers to configure layout structures, surface variations, and responsive formatting directly within the CMS.
Usage
These examples illustrate how content editors bind and structure card components.
1. Elevated Project Overview Card
A classic elevated profile card complete with title, description, body text, and a primary action button rendered within the footer 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 localised static site generation.",
"variant": "elevated",
"boxShadow": "lg",
"children": [
{
"type": "button",
"text": "View Project",
"variant": "solid"
}
]
}
Project Launchpad
2. Media Rich Cover Card with Top Image
Renders an outlined card featuring a large visual cover image aligned at the top of the content body. Perfect for blog posts, news grids, or product feature 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
Props
| Property | CMS Field Type | Default | Description / Supported Options |
|---|---|---|---|
Card Title (title) | string | - | Primary heading displayed inside the card's header area. |
Card Description (description) | string | - | Secondary supporting tagline positioned below the title. |
Body Text (body) | string | - | Main textual block content rendered inside the card body. |
Cover Image (image) | image | - | URL or media path for the companion graphic or photo. |
Image Placement (imagePosition) | select | "top" | Layout alignment of the cover graphic. • Options: "top", "bottom", "left", "right". |
Visual Variant (variant) | select | "elevated" | Border and shadow style. • Options: "elevated", "outline", "subtle". |
Shadow Depth (boxShadow) | select | "sm" | Theme shadow applied around the border outer contour. • Options: "none", "2xs", "xs", "sm", "md", "lg", "xl", "2xl". |
Clipping Bounds (overflow) | select | "hidden" | Overflow policy. Set to "visible" when the card nests unportaled overlay elements (Dropdowns, Popovers, DatePickers) to prevent layout clipping. |
Developer Notes & Accessibility
- Hydration Island: By default, Cards compile down to light, presentational Static-Only elements. However, if they contain active interactive children blocks or explicit state triggers, they hydrate as a conditional Tier-2 island on the client.
- WAI-ARIA Compliance: Cards are structured to enforce logical content reading orders. Use semantic headings (
h2-h4) for title slots. Ensure any decorative cover graphics are supplied with appropriate blank alt tags so screen readers bypass them gracefully.