Card

Rounded container surface for grouping related content.

Examples

Basic

Card content

<Card {...args} style={{width: 360}}>
  <Text type="body">Card content</Text>
</Card>

Variants

default

section

transparent

muted

<div
  style={{display: 'grid', gap: 16, gridTemplateColumns: 'repeat(4, 1fr)'}}>
  {(['default', 'section', 'transparent', 'muted'] as const).map(
    variant => (
      <Card key={variant} padding={4} variant={variant}>
        <Text type="body">{variant}</Text>
      </Card>
    ),
  )}
</div>

Colors

blue

cyan

gray

green

orange

pink

purple

red

teal

yellow

<div
  style={{display: 'grid', gap: 16, gridTemplateColumns: 'repeat(5, 1fr)'}}>
  {(
    [
      'blue',
      'cyan',
      'gray',
      'green',
      'orange',
      'pink',
      'purple',
      'red',
      'teal',
      'yellow',
    ] as const
  ).map(color => (
    <Card color={color} key={color} padding={4}>
      <Text type="body">{color}</Text>
    </Card>
  ))}
</div>

Padding

padding={0}

padding={1}

padding={2}

padding={3}

padding={4}

padding={6}

padding={8}

padding={10}

<div style={{display: 'flex', flexWrap: 'wrap', gap: 16}}>
  {steps.map(step => (
    <Card key={step} padding={step}>
      <div
        className={css({
          bg: 'surface.blue',
          borderRadius: 'md',
          p: '2',
        })}>
        <Text type="supporting">{`padding={${step}}`}</Text>
      </div>
    </Card>
  ))}
</div>

Section

A section card has no border or border-radius, making it suitable for use inside a larger container.

Another section

Section with color

<div className={containerStyle} style={{width: 400}}>
  <Card padding={4} variant="section">
    <Text type="body">
      A section card has no border or border-radius, making it suitable for
      use inside a larger container.
    </Text>
  </Card>
  <Divider />
  <Card padding={4} variant="section">
    <Text type="body">Another section</Text>
  </Card>
  <Divider />
  <Card color="blue" padding={4} variant="section">
    <Text type="body">Section with color</Text>
  </Card>
</div>

Full Bleed Divider

Content above the divider

The divider stretches to the card edges using the --card-padding custom property.

<Card padding={4} style={{width: 360}}>
  <VStack gap={3}>
    <Text type="body">Content above the divider</Text>
    <Divider isFullBleed />
    <Text type="body">
      The divider stretches to the card edges using the{' '}
      <code>--card-padding</code> custom property.
    </Text>
  </VStack>
</Card>

Nested

Outer card

Nested blue

Nested green

Nested muted card

<Card padding={4} style={{width: 480}}>
  <VStack gap={3}>
    <Text type="label">Outer card</Text>
    <div style={{display: 'grid', gap: 12, gridTemplateColumns: '1fr 1fr'}}>
      <Card color="blue" padding={3}>
        <Text type="supporting">Nested blue</Text>
      </Card>
      <Card color="green" padding={3}>
        <Text type="supporting">Nested green</Text>
      </Card>
    </div>
    <Card padding={3} variant="muted">
      <Text type="supporting">Nested muted card</Text>
    </Card>
  </VStack>
</Card>

Rich Content

Featured project

Active

A short description of the project with enough detail to understand what it does at a glance.

DetailsOpen

<Card padding={4} style={{width: 360}}>
  <VStack gap={3}>
    <HStack align="center" gap={3} justify="between">
      <HStack align="center" gap={2}>
        <Icon color="accent" icon={Star} />
        <Text type="label">Featured project</Text>
      </HStack>
      <Badge color="success" label="Active" />
    </HStack>
    <Text color="secondary" type="body">
      A short description of the project with enough detail to understand
      what it does at a glance.
    </Text>
    <Divider isFullBleed />
    <HStack gap={2} justify="end">
      <Button label="Details" size="sm" variant="ghost" />
      <Button label="Open" size="sm" variant="primary" />
    </HStack>
  </VStack>
</Card>

Clickable

Account settingsManage your profile and preferences

<Card
  className={css({cursor: 'pointer', _hover: {borderColor: 'primary'}})}
  onClick={() => {}}
  padding={4}
  role="button"
  style={{width: 360}}
  tabIndex={0}>
  <HStack align="center" gap={3} justify="between">
    <HStack align="center" gap={2}>
      <Icon icon={Settings} />
      <VStack gap={0}>
        <Text type="label">Account settings</Text>
        <Text color="secondary" type="supporting">
          Manage your profile and preferences
        </Text>
      </VStack>
    </HStack>
    <Icon color="secondary" icon={ChevronRight} />
  </HStack>
</Card>

Card List

ProfileEdit your personal info

NotificationsConfigure alerts

SettingsApp preferences

<VStack gap={2} style={{width: 400}}>
  {items.map(item => (
    <Card key={item.title} padding={3}>
      <HStack align="center" gap={3}>
        <Icon icon={item.icon} />
        <VStack gap={0}>
          <Text type="label">{item.title}</Text>
          <Text color="secondary" type="supporting">
            {item.description}
          </Text>
        </VStack>
      </HStack>
    </Card>
  ))}
</VStack>

With Layout

Settings

Sidebar

Main content area

CancelSave

<Card style={{height: 360, width: 600}}>
  <Layout
    content={
      <LayoutContent>
        <Text type="body">Main content area</Text>
      </LayoutContent>
    }
    footer={
      <LayoutFooter
        primaryButton={<Button label="Save" variant="primary" />}
        secondaryButton={<Button label="Cancel" variant="ghost" />}
      />
    }
    header={<LayoutHeader title="Settings" />}
    start={
      <LayoutPanel width={160}>
        <Text type="body">Sidebar</Text>
      </LayoutPanel>
    }
  />
</Card>

API

Card

Rounded container surface for grouping related content.

Prop	Type	Default	Description
color	"red" | "orange" | "yellow" | "green" | "teal" | "cyan" | "blue" | "purple" | "pink" | "gray"	—	Decorative surface color. When set, overrides the variant's default background with the corresponding surface color token.
data-testid	string	—	Test ID applied to the root element.
padding	0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10	0	Inner padding step.
variant	"section" | "default" | "transparent" | "muted"	'default'	Visual style variant. - default — bordered, rounded container with bg background. - section — flat container with no border or border-radius, for use inside a larger container. - transparent — no background. - muted — subtle background, no visible border.