role container
Card draft v0.1.0
A surface that groups a title and related content as one unit.
A card gathers what belongs together, a title and its content, on a raised surface with its own edge, so a page of many things reads as a grid of units: a project in a list of projects, a plan in a pricing page, a setting group. It is a surface, not a control: a card that opens something holds a link or a button; a card is never itself clickable. Its surface level follows the Color foundation.
Tokens
From packages/tokens/src/components/card.tokens.json. Path grammar: card.<part>.<property>[.<option>][.<state>]. Every value aliases a semantic token.
No token matches.
Part container (8)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
card.container.background.level-1
|
color |
{global.bg.level.1.default}
|
light
#F7F6F6
dark
#212121
|
--card-container-background-level-1
|
card.container.background.level-2
|
color |
{global.bg.level.2.default}
|
light
#FDFDFD
dark
#282828
|
--card-container-background-level-2
|
card.container.border-color.level-1
|
color |
{global.border.level.edge.level.1}
|
light
#D7D3D4
dark
#282828
|
--card-container-border-color-level-1
|
card.container.border-color.level-2
|
color |
{global.border.level.edge.level.2}
|
light
#DFDBDC
dark
#303030
|
--card-container-border-color-level-2
|
card.container.border-width
|
dimension |
{stroke-width.sm}
|
0.6px
|
--card-container-border-width
|
card.container.border-radius
|
dimension |
{corner-radius.sm}
|
8px
|
--card-container-border-radius
|
card.container.padding
|
dimension |
{space.16}
|
16px
|
--card-container-padding
|
card.container.gap
|
dimension |
{space.8}
|
8px
|
--card-container-gap
|
Part title (2)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
card.title.color
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--card-title-color
|
card.title.typography
|
typography |
{heading.family}{heading.size.2xs}{heading.weight.semi-bold}{font.line-height.tight}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":16,"unit":"px"},"fontWeight":600,"lineHeight":1.2,"letterSpacing":{"value":0,"unit":"px"}}
|
--card-title-typography-font-family--card-title-typography-font-size--card-title-typography-font-weight--card-title-typography-line-height--card-title-typography-letter-spacing
|
Part description (2)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
card.description.color
|
color |
{global.text.on-base.neutral.secondary}
|
light
#323031
dark
#B9B7B7
|
--card-description-color
|
card.description.typography
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--card-description-typography-font-family--card-description-typography-font-size--card-description-typography-font-weight--card-description-typography-line-height--card-description-typography-letter-spacing
|