ACTIONS & SURFACES

Card

Composable surface container. Five variants share the same Memphis chrome but differ in accent, weight, and elevation.

Import

1import {
2  Card,
3  CardHeader,
4  CardTitle,
5  CardDescription,
6  CardBody,
7  CardFooter,
8} from 'damo-ui'

Composition

Card title

Short caption that supports the title.

Body content. Mix any inline content here.
1<Card variant="default">
2  <CardHeader>
3    <CardTitle>Card title</CardTitle>
4    <CardDescription>Short caption that supports the title.</CardDescription>
5  </CardHeader>
6  <CardBody>
7    Body content. Mix any inline content here.
8  </CardBody>
9  <CardFooter>
10    <Button variant="ghost">Cancel</Button>
11    <Button variant="primary">Confirm</Button>
12  </CardFooter>
13</Card>

Featured variant

Featured

The most prominent variant — solid border, hard shadow, gold accent.
1<Card variant="featured" padding="lg">
2  <CardHeader>
3    <CardTitle>Featured</CardTitle>
4  </CardHeader>
5  <CardBody>The most prominent variant — solid border, hard shadow, gold accent.</CardBody>
6</Card>

Interactive variant

Hover and focus states make this variant tap-target friendly.
1<Card variant="interactive" padding="md">
2  <CardBody>Hover and focus states make this variant tap-target friendly.</CardBody>
3</Card>

Elevated variant

Soft drop shadow rather than the hard Memphis shadow. Good for content that should sit behind primary surfaces.

Elevated

Soft drop shadow instead of the hard Memphis shadow.

For surfaces that should recede slightly into the page.
1<Card variant="elevated" padding="md">
2  <CardHeader>
3    <CardTitle>Elevated</CardTitle>
4    <CardDescription>Soft drop shadow instead of the hard Memphis shadow.</CardDescription>
5  </CardHeader>
6  <CardBody>For surfaces that should recede slightly into the page.</CardBody>
7</Card>

Inverse variant

Flipped bg/fg — use on a light page when you need a section to feel like a dark island.

Inverse

fg/bg flipped — drop on a light page for instant contrast.
1<Card variant="inverse" padding="md">
2  <CardHeader>
3    <CardTitle>Inverse</CardTitle>
4  </CardHeader>
5  <CardBody>fg/bg flipped — drop on a light page for instant contrast.</CardBody>
6</Card>

API

Card props
PropTypeDefaultDescription
variant'default' | 'elevated' | 'featured' | 'interactive' | 'inverse''default'Visual treatment. Featured uses the gold accent; inverse flips fg/bg for dark surfaces.
padding'sm' | 'md' | 'lg''md'Inner spacing applied to the body and chrome rows.
classNamestring—Tailwind classes are merged on top of the variant defaults.

Accessibility

  • Presentational <div> by default — forward role / aria-label / aria-labelledby for landmarks (role="region", role="article", etc.).
  • .componentDocs.card.a11y.1
← Button & IconButtonDialog →