Card

Installation

npx vayu-ui-cli@latest add card

Usage

PreviewCode

Card Examples

Default

A basic card with media, header, content, and footer sections.

Design Tokens

A unified color palette for every surface.

Ground, primary, secondary, and semantic colors work seamlessly across light and dark mode.

Read more →

Interactive

Clickable card with keyboard support. Click to trigger an alert.

Click Me

This card is focusable and keyboard-accessible.

Interactive cards get role="button", tabIndex=0, and Enter / Space key support.

Linked

Card rendered as an anchor link, opening in a new tab.

GitHub

Opens in a new tab with rel="noopener noreferrer".

Disabled

Disabled interactive card with reduced opacity and blocked pointer events.

Disabled Card

Pointer events are blocked and opacity is reduced.

This card cannot be interacted with.

With Avatar & Action

Card header with avatar and action slot for profile-style layouts.

JD

John Doe

Software Engineer

Follow

Building beautiful user interfaces with modern web technologies.

<Card>
  <Card.Media src="/photo.jpg" alt="Photo" />
  <Card.Header
    title="Card Title"
    subtitle="Secondary description"
  />
  <Card.Content>Body text goes here.</Card.Content>
  <Card.Footer>
    <button>Action</button>
  </Card.Footer>
</Card>

<Card interactive onClick={() => {}}>
  <Card.Header title="Clickable Card" subtitle="Press Enter or click" />
  <Card.Content>This card responds to keyboard and pointer events.</Card.Content>
</Card>

<Card href="/details" target="_blank">
  <Card.Media src="/photo.jpg" alt="Photo" />
  <Card.Header title="Link Card" />
  <Card.Content>Renders as an anchor element.</Card.Content>
</Card>

<Card>
  <Card.Media src="/photo.jpg" alt="Photo" overlay={<span className="text-white font-semibold">Overlay Text</span>} />
  <Card.Header title="Card with Overlay" avatar={<div className="w-8 h-8 rounded-full bg-surface" />} action={<span className="text-xs text-muted-content">Badge</span>} />
  <Card.Content>Supports avatar, action, and media overlay.</Card.Content>
</Card>

<Card>
  <Card.Header title="Confirm Action" subtitle="Review before proceeding." />
  <Card.Content>
    This action cannot be undone. Please verify all details before continuing.
  </Card.Content>
  <Card.Footer className="flex-col items-stretch justify-start gap-2">
    <button>Confirm</button>
    <a href="/help" className="text-sm text-center">Need help?</a>
  </Card.Footer>
</Card>

Anatomy

<Card>
  <Card.Media src="/photo.jpg" alt="Photo" />
  <Card.Header title="Title" subtitle="Subtitle" />
  <Card.Content>Body text.</Card.Content>
  <Card.Footer>
    <button>Action</button>
  </Card.Footer>
</Card>

• Card — Root container. Renders as a <div> by default, <a> when href is set, or a role="button" div when interactive or onClick is provided.
• Card.Header — Displays a title, optional subtitle, leading avatar, and trailing action slot.
• Card.Media — Renders an image with configurable aspect ratio, object-fit, and an optional overlay.
• Card.Content — Body text wrapper with secondary typography styling.
• Card.Footer — Action bar with a top border, right-aligned by default.

Accessibility

• Keyboard Support:
  • Enter / Space — Activates interactive cards (interactive or onClick).
  • Tab — Moves focus into and out of the card.
• ARIA Attributes:
  • role="button" is applied to interactive cards (when interactive or onClick is set).
  • aria-disabled is set on the root element when disabled is true.
  • aria-hidden="true" is set on the avatar wrapper to prevent decorative images from being announced.
  • rel="noopener noreferrer" is automatically added for target="_blank" links.
• Focus Behavior:
  • focus-visible outline uses the semantic outline-focus token with a 2px offset.
  • Disabled cards receive pointer-events-none and reduced opacity.

Screen reader behavior

When a user navigates to a card, the screen reader announces the card contents based on the rendered HTML. For interactive cards, it announces the element as a button (via role="button") with the card title read as the accessible name. For linked cards, the screen reader identifies the element as a link and announces the destination URL. When disabled is set, the screen reader announces the card as disabled (via aria-disabled="true"). Avatar elements are hidden from the assistive technology tree (aria-hidden="true") to avoid redundant announcements. Media images are announced using their alt text.

Component Folder Structure

Card/
├── Card.tsx          # Root component with interactive logic and styling
├── CardHeader.tsx    # Header with title, subtitle, avatar, and action slots
├── CardMedia.tsx     # Image media with overlay support
├── CardContent.tsx   # Body content wrapper
├── CardFooter.tsx    # Footer action bar with border separator
├── hooks.ts          # Keyboard interaction handler (WCAG 2.1.1)
├── types.ts          # TypeScript type definitions
├── index.ts          # Public API with compound component exports
└── README.md         # Component usage reference

Props

Card

Card.Header

Card.Media

Card.Content

No specific props — accepts standard HTML div attributes.

Card.Footer

No specific props — accepts standard HTML div attributes.