Card
Props
| Name | Type | Default | Description |
|---|---|---|---|
width | number | string | - | Width of the card. Numbers are read as pixels and strings are used as they are. In a flex row or a grid track this is the preferred width: the card still yields when the row is narrower. |
height | number | string | - | Height of the card. Numbers are read as pixels and strings are used as they are. A fixed height makes the card scroll its own content; auto and an omitted height leave the height to the content. |
maxWidth | number | string | - | Maximum width of the card. |
minHeight | number | string | - | Minimum height of the card. |
padding | SpacingStep | - | Padding on all four sides, as one step of the spacing scale: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10. Omit it and the card uses the theme's card padding — spacing step 4 with no theme — so passing a step overrides the theme instead of restating the default. |
variant | CardVariant | 'default' | Background variant. default uses the standard card surface and draws the border, transparent drops the background and the border, and muted uses the muted surface. The non-semantic hues are blue, cyan, gray, green, orange, pink, purple, red, teal, and yellow. |
elevation | CardElevation | 'none' | Resting shadow depth: none, low, med, or high. Raise a card only when it has to float above the content around it. |
Slots
| Name | Description |
|---|---|
default | The card's content, usually a Stack holding a heading, text, and actions. |
Theme variables
| Name | Default | Description |
|---|---|---|
--astryx-card-padding | --astryx-spacing-4 | The theme's card padding. The padding prop bypasses it when it is set. --astryx-card-padding-inline, --astryx-card-padding-inline-start, --astryx-card-padding-inline-end, --astryx-card-padding-block-start, and --astryx-card-padding-block-end refine it per axis. |
--astryx-card-background | - | Background of the default variant. |
--astryx-card-muted-background | - | Background of the muted variant. |
--astryx-card-border | - | Border colour of the default variant. Its width comes from --astryx-border-width. |
--astryx-card-<hue>-background | - | Background of each hue variant, for example --astryx-card-blue-background. |
--astryx-card-shadow-low, -med, -high | built-in shadow | The three elevation shadows, used by elevation low, med, and high. A built-in shadow is used when the theme defines none. |
--_card-radius | --astryx-radius-container | The card's corner radius. Private, and a theme may override it. |
--_card-elevation | 0 0 transparent | The resting shadow, written from elevation. It composes with --_card-ring inside the card's box-shadow, so a ring and an elevation can coexist. |
--_card-ring | 0 0 transparent | An inset ring drawn in the card's shadow list, for a composing component that shows selection. |
Native attributes
The root element is a <div>.
The following go to the root element:
- HTML attributes.
aria-*attributes.data-*attributes.class.style.
variant, elevation, and padding are also reflected as data-variant, data-elevation, and data-padding on the root, and a fixed height adds data-scrollable="true".