Surface

Card

View in Figma

A surface container that groups related content. The primary variant is an elevated white card with a soft shadow; the secondary variant is a flat tinted card with no shadow for grouping on a gray screen.

Overview

A surface container that groups related content. The primary variant is an elevated white card with a soft shadow; the secondary variant is a flat tinted card with no shadow for grouping on a gray screen.

SlotCardBody
Variant
Primary

The primary variant.

Variants and states

default
primary
SlotCardBody
secondary
SlotCardBody

Anatomy

Card
SlotCardBody
  1. 1Container  required
  2. 2Slot  required  The CardBody slot (Figma Root). The card ships no content of its own; the consumer or the AI fills it.

Measurements

SlotCardBody
Height, padding, gaps, and radius, measured live from the rendered component

Specs

Values resolved live from the token spine. Token names follow the active platform; each links to its page.

Container
Corner radius
radiusMd
12pt
Padding (all sides)
spacingPaddingXl
16pt
Fill (primary)
colorBackgroundElevatedPrimary
#FFFFFF
Fill (secondary)
colorBackgroundSecondary
#F3F3F6
Elevation
Shadow blur (primary only)
elevationL2SecondaryBlur
24pt
Shadow Y offset (primary only)
elevationL2SecondaryOffsetY
4pt
Shadow color (primary only)
elevationL2SecondaryColor
#00000014 · 8%
Slot
Slot placeholder outline (docs only)
colorBorderPrimary
#E5E5E8

Properties

The component’s Figma API, the properties you set on an instance. Useful to designers in Figma and to engineers mapping it to code props.

PropertyTypeValues
variantvariantprimary, secondary
RootslotSlot

Accessibility

When the whole card is tappable, expose it as one control with a single accessible name rather than many separate targets. A static card needs no special role; keep its text at normal contrast.

Reference: Apple Human Interface Guidelines and WCAG 2.5.5 Target Size.