Card
A bordered, padded container, only for an interactive panel (controls, a form, a configurator). Tables, charts and text do not need one. Give it a Title and a Caption. Separate the groups in it with a Divider or the plain gap, never with a nested Card or a bordered Box. Variant "section" is a heading and content without a box. Variant "outline" always has a box. In markdown mode, a Card without controls renders as "section" unless it sets variant or border.
Examples
Loading examples…
Props
| Prop | Type | Description |
|---|---|---|
align | "start" | "center" | "end" | "baseline" | "stretch" | |
justify | "start" | "center" | "end" | "spaceBetween" | "spaceAround" | "spaceEvenly" | "stretch" | |
wrap | "nowrap" | "wrap" | "wrap-reverse" | |
gap | number | string | 4px steps when a number |
rowGap | number | string | |
columnGap | number | string | |
padding | number | string | 4px steps when a number |
background | string | One of surface|surface-secondary|surface-tertiary|surface-elevated|surface-elevated-secondary|surface-inverted|surface-soft|info|warning|caution|success|danger|discovery|info-solid|warning-solid|caution-solid|success-solid|danger-solid|discovery-solid or a CSS color. Leave it unset. Only one summary panel in a Card can use "surface-secondary" |
border | boolean | |
borderColor | "default" | "subtle" | "strong" | "info" | "warning" | "caution" | "success" | "danger" | "discovery" | |
radius | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full" | number | string | object | |
width | number | string | |
height | number | string | |
minWidth | number | string | |
maxWidth | number | string | |
minHeight | number | string | |
maxHeight | number | string | |
flex | number | |
weight | number | flex-grow in a Row or Column |
aspectRatio | string | |
scrollable | boolean | |
clip | boolean | |
shadow | boolean | |
inline | boolean | |
role | string | ARIA role |
flush | boolean | No padding |
minSize | number | string | Minimum width and height |
maxSize | number | string | Maximum width and height |
disableAutoSpacing | boolean | No default gap between children |
variant | "default" | "outline" | "section" | "soft" | "elevated" | "transparent" | |
shadowStyle | "none" | "sm" | "md" | Overrides the shadow of the variant |
size | "sm" | "md" | "lg" | The padding preset: 8, 16 or 24px. Default "md" |
Slots
child· singlechildren· multiple
Events
onVisible· Sent once, the first time the container scrolls into view. Use it to load more content lazily.