Card
A card component that provides a container for content with optional header and footer sections. It supports separators between sections and customizable padding.
Props
| Name | Default | Type |
|---|---|---|
separators | false | boolean Adds separators between all sections (header, content, footer) |
headerSeparator | false | boolean Adds a separator only after the header section |
footerSeparator | false | boolean Adds a separator only before the footer section |
padding | true | boolean Controls whether the card content has padding |
headerAlign | baseline | 'start' | 'center' | 'end' | 'baseline' Controls vertical alignment of items in the card header |
Slots
| Name | Accepts | Description |
|---|---|---|
default | any | The main content of the card |
header | any | Content to be displayed in the header section |
header-end | any | Content to be displayed at the end of the header section (right-aligned) |
footer | any | Content to be displayed in the footer section |
Centered Header
Use the header-align prop to vertically align header content. This is useful when the header contains more than just the card title.
Error State
Use centered and border-style="dashed" to create a styled error state card.
Something went wrong
We couldn't process your request. Please try again later.
Tokens
CSS variable tokens used for global or per-instance manipulation of certain styling.
| Token | Default | Description |
|---|---|---|
--vui-card-header-align | center | Header content alignment |
--vui-card-border-style | solid | Border style |
--vui-card-border-color | var(--color-border) | Border color |
--vui-card-background-color | var(--color-bg) | Background color |
--vui-card-padding-block | var(--space-m) | Vertical content padding |
--vui-card-padding-inline | var(--space-m) | Horizontal content padding |