Card, Asgard Docs

Data display

Group related content and actions.

Card is a composable container for grouping related content with optional header, content, actions, and media sections.

Key features:

Sub-components: CardHeader, CardContent, CardActions, CardMedia
Variants: plain, outlined, filled
Semantic coloring and configurable elevation shadows
hoverable and onClick for interactive card grids

Loading preview…

When to use it

Items in a grid or list
A settings or summary panel
A media / product tile with actions
Clickable, hoverable tiles

Properties

Prop	Type	Default	Description
`variant`	`'plain' \| 'outlined' \| 'filled'`	`'outlined'`	Visual style variant controlling the card border and background.
`type`	`'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error' \| 'info'`	—	Semantic color type applied to the card accent or background.
`elevation`	`number`	`0`	Shadow depth level for the card. Higher values produce more pronounced shadows.
`hoverable`	`boolean`	`false`	When true, the card elevates and highlights on mouse hover.
`onClick`	`() => void`	—	Click handler that makes the entire card interactive with a pointer cursor.

Notes

Compose cards using the sub-components CardHeader, CardContent, CardActions, and CardMedia for structured layouts.
CardMedia accepts src, alt, and height props to render an image or media banner at the top or within the card.
Setting hoverable to true adds a subtle elevation and highlight effect on hover, useful for clickable card grids.

Presets