Layout

Card

Surface container with outline, elevated and filled variants, four padding scales, optional click interactivity and Header/Body/Footer sections.

Import

import { Card, CardHeader, CardBody, CardFooter } from "@zephora/react";

Examples

Variants

Three surface styles for different levels of emphasis.

Outline

Elevated

Filled

<Card variant="outline">Outline</Card>
<Card variant="elevated">Elevated</Card>
<Card variant="filled">Filled</Card>

Sections

CardHeader, CardBody and CardFooter structure the content. Use padding="none" on the Card so each section brings its own spacing.

Team plan

Unlimited projects, priority support and a shared component library.

<Card padding="none">
  <CardHeader>Team plan</CardHeader>
  <CardBody>
    Unlimited projects, priority support and a shared component library.
  </CardBody>
  <CardFooter>
    <Button size="sm">Upgrade</Button>
    <Button size="sm" variant="ghost">Learn more</Button>
  </CardFooter>
</Card>

Interactive

With `interactive` and an `onClick`, the card becomes focusable (role="button") and reacts to Enter/Space.

Clicked 0 times

const [count, setCount] = React.useState(0);

<Card interactive onClick={() => setCount((c) => c + 1)}>
  Clicked {count} times
</Card>

API

Card props

Prop	Type	Default	Description
`variant`	`"outline" \| "elevated" \| "filled"`	`"outline"`	Visual style of the surface.
`padding`	`"none" \| "sm" \| "md" \| "lg"`	`"md"`	Inner padding scale. Use "none" when composing sections.
`interactive`	`boolean`	`false`	Hover shadow; combined with onClick the card becomes focusable (role="button", tabIndex 0) and Enter/Space trigger the click.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.
`…rest`	`HTMLAttributes<HTMLDivElement>`	—	All native div props are forwarded.

CardHeader / CardBody / CardFooter props

Prop	Type	Default	Description
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.
`…rest`	`HTMLAttributes<HTMLDivElement>`	—	All native div props are forwarded.

Keyboard

Key	Action
`Enter / Space`	Activates an interactive card that has an onClick handler.
`Tab`	Moves focus to and from an interactive card.