Skip to content

ComponentsCard

Components

Card

Surface cards with a ring layer and a fill layer: variants, sm size scope, link cards (stretched CardLink: no ring, translucent card-link fill with hover / pressed layers), tinted icon tiles, media, bezel.

Variants

default surface-1 (#fff | #191919) · raised surface-2 · sunken surface-0 (no ring) · ring (no fill) · neutral 5% · tint. Ring (--cds-border) is inset white 4 % in dark, outer black 8 % in light.

default

Card body padding 16, radius 12.

raised

Card body padding 16, radius 12.

sunken

Card body padding 16, radius 12.

ring

Card body padding 16, radius 12.

neutral

Card body padding 16, radius 12.

New

Tint (promo)

tint="[light, dark]"

Usage
ring="inset"

Inset 1px ring in light mode too (project and gallery cards).

Info card

Title + text column, two sm actions, a dismiss action in CardAction.

md (default)

Artifacts now live in their own space

Everything you create is collected here. Open one to keep working on it, or start something new from a template.

Linked cards

A CardLink stretches over the card and turns a default card into a link card: no ring, the card-link fill (#00000006 | #ffffff08), the fill swapped for card-link-hover (→ 5 %) and card-link-pressed (→ 7.5 %), no squish. Focus paints the focus ring on the card. raised link cards keep their ring and fill (N8: hover only scales); project, scheduled task and routine cards are default link cards; press="scale" scales the whole card. Inner buttons stay independent.

Brand guidelines

Apply the brand's colours and typography to any document or slide.

Quarterly planning

Roadmap drafts, OKRs and notes from the planning offsite.

Updated 2 days ago Example project

Launch dashboard

Edited 5h ago

Tinted icon tile

IconTile (N7): neutral 32×32 r8 on black / white 5 % with a 20px secondary glyph (project cards); shape chip radius 5.5 (artifact card row); sm + hue 28×28 r 25 % on the 12 % tint with a 16px tinted glyph (artifact list type mark); lg + accent 40×40 r8 accent 12 % (artifacts grid footer). interactive tiles double their tint on hover (dark adds the 650 step).

Tones and sizes

Sizes

sm is the cds sm scope: radius 11, padding 14; Buttons inside default to 28px.

size="md"

The button below has no size prop.

Content
size="sm"

The button below has no size prop.

Content

Bezel

CardBezel
Desktop appOuter radius 32, padding 10, 0.5px border; inner radius 24.

Light and dark

Default card (light)

Hover me: fill goes to surface-2.

Raised
Default card (dark)

Hover me: fill goes to surface-2.

Raised