Card

A bordered surface for one block of content. Use the header, body and footer parts for a titled panel with actions; use the card alone with padding for a simple box.

Card
CardHeader
CardTitle
CardBody
CardFooter

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, Card

Projects

Three repositories, two with agents running. A very long name such as skribly-agent-skills-experimental-branch-preview wraps here.

A sunken card for quiet notes.

Dark theme, Card

Projects

Three repositories, two with agents running. A very long name such as skribly-agent-skills-experimental-branch-preview wraps here.

A sunken card for quiet notes.

High contrast theme, Card

Projects

Three repositories, two with agents running. A very long name such as skribly-agent-skills-experimental-branch-preview wraps here.

A sunken card for quiet notes.

UsageLink to the section Usage

tsx

import { Card, CardHeader, CardTitle, CardBody, CardFooter } from '@skribly/ui/surfaces'

tsx

<Card as="section" padding="none">
  <CardHeader actions={<Button size="sm" variant="outline">Add</Button>}>
    <CardTitle icon={<FolderGit2 />}>Projects</CardTitle>
  </CardHeader>
  <CardBody>…</CardBody>
  <CardFooter><Button variant="ghost">Open all</Button></CardFooter>
</Card>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

As a section, article or aside the card becomes a region named by its CardTitle.
Pick the heading level that fits the page outline with level.
The title icon is hidden from screen readers.
Header actions wrap under the title on narrow screens, and long titles break instead of overflowing.

This demo runs through axe in all three themes on every test run. See what the tests check.