Card

GradeTested

UsageCopy Anchor Link

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@cadence-clinical/ui";

<Card>
  <CardHeader>
    <CardTitle render={<h2 />}>Next appointment</CardTitle>
    <CardDescription>Outpatients, Level 2</CardDescription>
  </CardHeader>
  <CardContent>Monday at 10:15 with the review clinic.</CardContent>
  <CardFooter>
    <Button size="sm">Confirm attendance</Button>
  </CardFooter>
</Card>;

Card follows the shadcn Card and keeps its part names. Every part is optional.

Give the title a heading levelCopy Anchor Link

CardTitle renders a div unless you say otherwise, because only the page knows which heading level fits. Pass the heading through the render prop:

<CardTitle render={<h2 />}>Care team</CardTitle>

A title left as a div cannot be found by someone who navigates by headings, so set a level whenever the card is a section of the page.

Every part takes render, which is the Base UI render prop. Use it to make the card a labelled region:

<Card render={<section aria-labelledby="care-team-title" />}>
  <CardHeader>
    <CardTitle id="care-team-title" render={<h2 />}>
      Care team
    </CardTitle>
  </CardHeader>
</Card>

ActionCopy Anchor Link

Put one control in CardAction. It stays at the top end of the header, and a long title wraps beside it.

SizeCopy Anchor Link

size="sm" tightens the spacing and the title one step further than the density does, for a card inside another surface.

What Cadence changesCopy Anchor Link

• Text and spacing follow the density. The card's text is the size of the text in a default-size Button inside it, at both densities. The shadcn card is fixed at 14px text and 16px padding.

• Nothing is truncated or clipped. Text wraps, including a value with nowhere to break. The card does not hide its overflow, so a focus ring at its edge stays whole. The shadcn card clips its content to round the corners of an image, which this card does not do.

• The boundary is the border token, so it follows the mode and the contrast setting.

• The card renders on the server. It has no client-side code of its own.

AccessibilityCopy Anchor Link

• Give CardTitle a heading level when the card is a section of the page.
• A card is not a status surface. To show that something is critical or needs attention, do not recolour a card: wait for the alert component.

PropsCopy Anchor Link