Card
DraftA surface container for grouping related content and actions with optional header, body, and footer regions.
- Usage
- Specs
- Content
- Status & changelog
- Code
Product details
Lightweight running shoe with responsive cushioning and breathable mesh upper.
Common alternative names
Container, panel, surface
Usage guidelines coming soon.
Specs coming soon.
Content guidelines coming soon.
Status & changelog coming soon.
Usage
import { Card, CardHeader, CardBody, CardFooter } from '@arch-ui/components';
function ProductCard() {
return (
<Card>
<CardHeader>Product details</CardHeader>
<CardBody>
<p>Lightweight running shoe with responsive cushioning.</p>
</CardBody>
<CardFooter>$129.00</CardFooter>
</Card>
);
}
Props
Card
| Prop | Type | Default | Description |
|---|---|---|---|
clickable | boolean | false | When true, the card becomes interactive (renders as a link or button). |
href | string | -- | When provided alongside clickable, renders the card as an <a> element. |
onClick | MouseEventHandler | -- | Click handler for cards that trigger actions without navigation. |
padding | string | 'spacing-component-md' | CSS custom property name (without --) for the card padding. Must be a valid spacing token. |
children | ReactNode | -- | Card content. |
className | string | -- | Additional CSS class names. |
CardHeader / CardBody / CardFooter
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | -- | Section content. |
className | string | -- | Additional CSS class names. |
All sub-components and Card itself support ref forwarding.
Clickable link card
When the card should navigate to a new page, pass both clickable and href. The card renders as an anchor element with hover elevation and focus-visible styling.
<Card clickable href="/products/shoe-123">
<CardBody>View product details</CardBody>
</Card>
Clickable action card
When the card triggers an action without navigation, pass clickable and onClick. The card renders as a div with role="button" and keyboard support for Enter and Space.
<Card clickable onClick={() => setSelected('option-a')}>
<CardBody>Select this option</CardBody>
</Card>
Anatomy
- CardHeader -- top region separated from the body by a border. Suited for titles, icons, or metadata.
- CardBody -- primary content area. Fills available vertical space (
flex: 1). - CardFooter -- bottom region separated from the body by a border. Suited for actions, prices, or timestamps.
All three sub-components are optional; you can use any combination.
Accessibility
- Static cards render as a plain
<div>. - Clickable cards with
hrefrender as<a>, inheriting native link semantics. - Clickable cards without
hrefrender as<div role="button" tabIndex={0}>with Enter and Space key handling. - Focus is indicated with a
var(--color-border-focus)outline via:focus-visible. - Transitions respect
prefers-reduced-motion.