cards
Cards wraps the global Card primitive with main defaults so home-site surfaces stay visually consistent while still exposing the underlying Card escape hatches.
| field | value |
|---|---|
| group | main |
| import | @arieare/ds-main |
| source | packages/ds-main/src/Cards.tsx packages/ds-main/src/card.css |
surface card
Default main-card wrapper around the shared card primitive.
hovering card
Same component, different elevation and padding presets.
component tokens
| token | source | description |
|---|---|---|
--card-bg / --card-border / --card-radius | @arieare/ds/tokens.css | Shared DS card surface tokens inherited by the main card wrapper. |
--card-shadow-surface / --card-shadow-hovering | @arieare/ds/tokens.css + @arieare/ds-main/tokens.css | Defines the card elevation response across surface and hovering states. |
--page-bg / --primary-ink | @arieare/ds-main/tokens.css | Main-app ink and surface tokens that tint the card content. |
props
| prop | type | default | description |
|---|---|---|---|
padding | "none" | "tight" | "medium" | "loose" | "medium" | Overrides the wrapped Card padding preset. |
elevation | "surface" | "floating" | "hovering" | "surface" | Controls the wrapped Card elevation preset. |
as | ElementType | — | Changes the rendered HTML element. |
...section attributes | HTMLAttributes<HTMLElement> | — | Forwards standard section-level HTML attributes to the surface. |