Surface container. Use tone="raised" for
cards that sit above the canvas, tone="outlined"
for inline containers, and tone="surface" for
plain backgrounds.
tone="surface"
Season summary
Plain card, flush with surroundings.
tone="raised"
Latest licences
Elevated card with shadow md.
tone="outlined"
Upcoming matches
Outlined card — no shadow, strong border.
tsx · view.tsx
import { Card } from '@petanque-life/shared';
<Card tone="raised" padding="md">
<Card.Header title="Latest licences" subtitle="2026 season" />
<Card.Body>
Matched text rolls here.
</Card.Body>
<Card.Footer>
<Button variant="ghost">View all</Button>
</Card.Footer>
</Card>API
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | "surface" | "raised" | "outlined" | "surface" | Elevation treatment. |
| padding | "none" | "sm" | "md" | "lg" | "md" | Internal padding. |
| interactive | boolean | false | Adds hover/focus ring for clickable cards. Requires <code>as="button"</code> or <code>as="a"</code>. |
| as | "div" | "a" | "button" | "section" | "div" | Rendered element. |