Card

import { Card } from '@contour-ui/react';

<Card.Root>
  <Card.Header>
    <Card.Title>Live set</Card.Title>
    <Card.Description>Recorded on 12 October.</Card.Description>
  </Card.Header>
  <Card.Body>Two stereo stems and a click track.</Card.Body>
  <Card.Footer>
    <span>12 tracks</span>
    <span>48 kHz</span>
  </Card.Footer>
</Card.Root>;

Every part is optional. For a card with a title and a description only, put both in Card.Body.

Variants

A subtle card keeps a transparent border, so cards of every variant have the same size. size sets the padding and the gap between the parts.

As a link

Pass a link to Card.Root with asChild, and the whole card is that link, with a hover color and a focus ring. Use your router's link in place of <a>:

import { Link } from 'react-router';

<Card.Root asChild>
  <Link to="/docs/essentials">
    <Card.Body>
      <Card.Title>Essentials</Card.Title>
      <Card.Description>The everyday components of contour-ui.</Card.Description>
    </Card.Body>
  </Link>
</Card.Root>;

A <button> works the same way and fills its container like any card.

Anatomy

The header and the body stack their content; the body takes the free height, so the footers of cards in one grid row line up. The footer lays out its items in a row.

Props

Card.Root:

Every part takes asChild and the props of its element, such as className, style and id; className is merged with the part's class.

Accessibility

• Card.Root is a div without a role: it groups content visually. Card.Title is an h3; to fit the headings of your page, pass another level with asChild: <Card.Title asChild><h2>Essentials</h2></Card.Title>.
• A link card is one link, named by its text: the title first, then the description. Keep the description short, and put no other links or buttons inside: interactive elements cannot nest.
• A button may only contain phrasing content: in a button card, render the parts as spans with asChild.
• Hover changes the border and the background, and keyboard focus shows a focus ring. The elevated shadow is decoration: a raised background and a border set the card apart without it.

Tokens