Panel

Card

Groups related content and actions in one bordered block.

Import

import { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent } from "@booleanpress/ui/card"

Usage

A card is a bordered block with optional header, content and footer parts. It is flat: it separates from the page by its border, with no shadow.

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@booleanpress/ui/card"

export function Mailer() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Primary mailer</CardTitle>
        <CardDescription>Amazon SES</CardDescription>
      </CardHeader>
      <CardContent>Healthy</CardContent>
    </Card>
  )
}

The parts are Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent and CardFooter. Put a button in CardAction to place it at the end of the header. Add border-b to the header or border-t to the footer for a divider: the part then pads its own side to match. Every part is a div and takes className. A card does not scroll or collapse; for that, put a ScrollArea or Collapsible inside.

Examples

Basic

Title, description and an action in the header, text in the content and a button in the footer.

Primary mailer

Amazon SES, eu-west-1

1,840 emails sent in the last 7 days, 12 failed.

Statistic

A card with a header and content only, showing one number.

Delivered today

1,284

98.7% of emails sent.

With dividers

border-b on the header and border-t on the footer draw the dividers; the parts keep their spacing.

Delete API key

Requests that use this key stop working at once.

The key smtp-prod-2 was last used 3 minutes ago.

Accessibility

Semantics: Plain divs: a card has no role, so it is not a landmark or a group.
Labels: CardTitle is a div, not a heading. Where the card starts a section of the page, put a heading element (h2, h3) inside CardTitle. Give an icon-only button in CardAction an aria-label.
Focus: A card has no tab stop. Buttons and links inside it are tab stops in reading order. A card that is wholly clickable needs a real link or button inside it; do not put onClick on the card.
Known limits: The title is not a heading by default, so a screen-reader user cannot jump from card to card by heading. Add the heading element yourself where that navigation matters.
A card has no state of its own (selected, loading, disabled). Show such a state with content or a Badge, never by colour alone.