Skip to content

Card

In the app

The bordered container and its parts. Header on the soft fill, content padded, footer above a soft hairline. 8px radius, no shadow.

@varick/ui/components/cardAdded 2 Sept 2026

Renewal manager

Runs nightly at 02:00

Running
Runs today156
Success rate88.1%

Usage

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

export function Example() {
  return (
    <Card>
      <CardHeader>
        <div>
          <CardTitle>Renewal manager</CardTitle>
          <CardDescription>Runs nightly at 02:00</CardDescription>
        </div>
        <CardAction><Status tone="success" pulse>Running</Status></CardAction>
      </CardHeader>
      <CardContent>...</CardContent>
      <CardFooter><Button size="sm">View runs</Button></CardFooter>
    </Card>
  );
}

Variants

Eyebrow title, the app’s data-card header

Recent runs 12

Submission router2 min agoDone
Renewal manager9 min agoReview
<CardHeader>
  <CardTitle eyebrow>Recent runs <Badge>12</Badge></CardTitle>
  <CardAction><Button size="sm" variant="ghost">View all</Button></CardAction>
</CardHeader>

API reference

Every component also accepts className and the native props of its root element.

PropTypeDefaultDescription
CardComponentProps<'div'>Border, 8px radius, white, overflow hidden.
CardHeaderComponentProps<'div'>Soft fill, soft hairline below, flex with space between.
CardTitle.eyebrowbooleanfalseThe 11px tracked uppercase title the app uses on data cards.
CardActionComponentProps<'div'>Pushed to the right of the header.
CardContentComponentProps<'div'>16px padding. Pass p-0 for tables and rows.
CardFooterComponentProps<'div'>Soft hairline above, actions in a row.

Styles

The CSS as it appears in the app. The live component above is the same values as Tailwind classes.

.card {
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline-soft);
  background: var(--fill-soft);
}
.card-title { font-size: 11px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-mid); }
.card-toolbar-title { font-size: 13.5px; font-weight: 500; color: var(--fg-high); }