Container with four surface treatments, a padding step, and an optional clickable mode.
Default usage you can copy and adapt.
Simple card with title and content
This is a default card with clean styling.
This card indicates a successful action.
This card shows a warning state.
This card indicates an error state.
This card provides informational content.
The props you are most likely to need, with types and defaults.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| variant | CardVariant | No | default | Surface treatment: default, elevated, outlined or flat. |
| size | SizeVariant | No | md | Padding step. The corner radius does not change with it. |
| fullWidth | boolean | No | true | Fill the container's width. |
| onclick | (event: MouseEvent) => void | No | — | Makes the card clickable. Pair it with ariaLabel. |
| ariaLabel | string | No | — | Accessible name. Required when onclick is set. |