Card
Keep a related heading, description and other blocks together on a styled surface.
Code name: Card · Category: Layout
Registered in the live renderer. Website context and the limitations below still apply.
When to use it
Use a card for a service summary or a compact information group. Put several cards inside a row to compare related choices.
In the editor
- Add content inside the card.
- Choose its surface colour, border and shadow.
- Check card alignment in the surrounding row.
Example
This example uses illustrative content. Media placeholders must be replaced with your own assets; data-backed blocks need the normal website context.
<Card>
<Typography variant="h3">A focused first session</Typography>
<Markdown>Discuss your priorities and leave with a clear next step.</Markdown>
</Card>Behaviour and limitations
- Card contains child blocks. A card-level link uses navigatePathname.
- For equal-height cards, use a parent row with alignRowVertical="stretch". Legacy fullHeight is not an active sizing control.
- Avoid nested competing links when making the whole card clickable.
Property reference
Types below describe the editor controls and known choices, not every value accepted by the renderer. A renderer default is extracted from its parameter; an editor-only default does not prove the runtime default. “Not declared here” does not mean required. Preserve omitted values unless the requested edit needs them.
| Property | Editor value type | Default evidence | Guidance |
|---|---|---|---|
spacing | object | Not declared here | An object of spacing settings. Preserve existing responsive values when changing a single setting. |
backgroundColor | string | "#ffffff" (editor only) | Background colour. Theme-derived appearance can still depend on the surrounding section. |
themeVariant | string | "white" (renderer) | Theme variant. See the usage notes for this block. |
shadowColor | string | "#DEDEDE" (renderer) | Shadow color. See the usage notes for this block. |
xs | number | 12 (renderer) | Mobile Size. See the usage notes for this block. |
md | number | 12 (renderer) | Tablet Size. See the usage notes for this block. |
lg | number | 12 (renderer) | Desktop Size. See the usage notes for this block. |
maxWidth | number | Not declared here | Max Width. See the usage notes for this block. |
borderRadius | number | 10 (renderer) | Border Radius. See the usage notes for this block. |
elevation | number | 10 (renderer) | Shadow and elevation. See the usage notes for this block. |
animation | boolean | true (renderer) | Animation on hover. See the usage notes for this block. |
animationType | "none", "fade-up", "fade-down", "fade-left", "fade-right", "flip-up", "flip-down", "flip-left", "flip-right", "zoom-in", "zoom-left", "zoom-right" | "" (renderer) | Entrance animation setting. Use a supported editor value; preserve it for unrelated edits. |
borderColor | string | "" (renderer) | Border Color. See the usage notes for this block. |
backdropFilter | number | 0 (renderer) | Glass effect. See the usage notes for this block. |
screenList | string | "" (renderer) | Comma-separated device names to hide on: mobile, tablet, desktop. An empty string hides on none. |
enablePaddingTemplates | boolean | false (editor only) | Enable Responsive Padding. See the usage notes for this block. |
navigatePathname | string | "" (renderer) | The link destination. Use an existing page or a verified URL. |
hrefTarget | See guidance | Not declared here | Link browsing context, such as _self or _blank. It is separate from the destination. |
actions | See guidance | Not declared here | Editor group only. Set its individual supported properties; do not emit an actions object. |
plausibleGoal | string | Not declared here | Goal Name. See the usage notes for this block. Editor group: actions. |
css | string | Not declared here | Custom CSS text. Preserve unrelated rules and prefer the dedicated property for supported edits. |
children | See guidance | Not declared here | Nested content between the opening and closing tags. Follow the block-specific example. |
Legacy compatibility
sm, fullHeight are retained for compatibility. Preserve existing values unless the requested change requires migration; do not choose them for new content without checking the notes above.
