CONTAINERS AND LAYOUT

Card

Draft

A surface container for grouping related content and actions with optional header, body, and footer regions.

Usage

Product details

Lightweight running shoe with responsive cushioning and breathable mesh upper.

Common alternative names

Container, panel, surface

Usage guidelines coming soon.

Specs

Specs coming soon.

Content

Content guidelines coming soon.

Status & changelog

Status & changelog coming soon.

Code

---

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 href render as <a>, inheriting native link semantics.
• Clickable cards without href render 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.