Card

A Paper-based container for grouping related content. Cards default to elevation=1 — a surface-1 background and a matching shadow — so they lift off the page immediately with no props required. Use Card.Section for full-bleed areas that break out of the card's padding (ideal for images and dividers).

Default

No props needed — the default elevation=1 gives the card its surface color and shadow. In dark mode the surface is tinted with the primary color.

Card title

This is the card body. The shadow and surface color come from the default elevation=1.

<Card radius="md">
  <Text fw={500}>Card title</Text>
  <Text size="sm" c="dimmed">Card body content.</Text>
</Card>

Elevation scale

Override the default elevation to place the card at any depth level. Lower values sit closer to the page; higher values suggest floating overlays.

elevation=0

flat

elevation=1

panel (default)

elevation=2

secondary panel

elevation=3

dropdown

elevation=4

level 4

elevation=5

level 5

<Card elevation={0}>0 — flat</Card>
<Card elevation={1}>1 — panel (default)</Card>
<Card elevation={2}>2 — secondary panel</Card>
<Card elevation={3}>3 — dropdown level</Card>

Glass variant

A frosted-glass material for cards placed over rich imagery or color. Sets elevation=0 internally — the surface is the backdrop, not a raised layer.

Glass card

Frosted blur over the gradient. Use over imagery or vibrant backgrounds.

<div style={{ background: 'linear-gradient(135deg, violet, blue)', padding: '2rem' }}>
  <Card variant="glass" radius="md">
    <Text fw={500} c="white">Glass card</Text>
    <Text size="sm" c="white">Frosted blur over the gradient.</Text>
  </Card>
</div>

With border

Card with border

Combines the default elevation shadow with a crisp border edge.

<Card radius="md" withBorder>
  <Text fw={500}>Card with border</Text>
  <Text size="sm" c="dimmed">Combines elevation shadow with a visible border.</Text>
</Card>

With image section

Mountains

Norway Fjords

Travel

Stunning mountain views and pristine fjords await in western Norway.

<Card radius="md" withBorder>
  <Card.Section>
    <Image src="..." height={160} alt="Mountains" />
  </Card.Section>

  <Stack gap="xs" style={{ padding: 'var(--dv-spacing-md)' }}>
    <Group justify="space-between" align="center">
      <Text fw={500}>Norway Fjords</Text>
      <Badge color="violet" size="sm">Travel</Badge>
    </Group>
    <Text size="sm" c="dimmed">
      Stunning mountain views and pristine fjords await.
    </Text>
    <Button fullWidth variant="light">Read article</Button>
  </Stack>
</Card>

Horizontal orientation

Mountains

Horizontal card

Image section sits side-by-side with content when orientation="horizontal".

<Card radius="md" withBorder orientation="horizontal">
  <Card.Section>
    <Image src="..." alt="..." />
  </Card.Section>
  <Stack gap="xs" style={{ padding: 'var(--dv-spacing-md)' }}>
    <Text fw={500}>Horizontal card</Text>
    <Text size="sm" c="dimmed">Side-by-side layout.</Text>
  </Stack>
</Card>

Section with border

Card header

New

This section has a border that separates it from the content above.

<Card withBorder radius="md">
  <Card.Section inheritPadding style={{ padding: 'var(--dv-spacing-md)' }}>
    <Group justify="space-between">
      <Text fw={500}>Card header</Text>
      <Badge>New</Badge>
    </Group>
  </Card.Section>
  <Card.Section withBorder inheritPadding style={{ padding: 'var(--dv-spacing-md)' }}>
    <Text size="sm" c="dimmed">Section with border separator.</Text>
  </Card.Section>
</Card>

Card props

PropTypeDefaultDescription
elevation0|1|2|3|4|51Elevation level — sets both surface color and shadow
variant'glass'—Frosted-glass surface material
padding'xs'|'sm'|'md'|'lg'|'xl'—Inner padding using spacing tokens
shadow'xs'|'sm'|'md'|'lg'|'xl'|string—Raw shadow override (escape hatch; prefer elevation)
radius'xs'|'sm'|'md'|'lg'|'xl'|string—Corner radius
withBorderboolean—Adds a visible border
orientation'vertical'|'horizontal''vertical'Layout direction for content sections
componentstring'div'Root element override

Card.Section props

PropTypeDefaultDescription
withBorderboolean—Adds a border separating this section
inheritPaddingboolean—Applies the card's padding instead of breaking out
componentstring'div'Root element override