primitives

Card

Surface for grouping related content. Use for product detail tiles, settings sections, list items that need to feel like discrete objects.

Compound component: `Card` is the wrapper, `CardHeader / CardTitle / CardDescription / CardAction` form the top, `CardContent` the body, `CardFooter` the bottom strip. The `size="sm"` prop tightens padding for dense lists.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/card.json

Or import from the workspace package:

import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter } from "@8maverik8/design";

Examples

Default

Project Pegasus

Last deploy 4 minutes ago

Drift score is healthy. 23 resources tracked.

<Card>
  <CardHeader>
    <CardTitle>Project Pegasus</CardTitle>
    <CardDescription>Last deploy 4 minutes ago</CardDescription>
    <CardAction>
      <Button variant="outline" size="sm">Manage</Button>
    </CardAction>
  </CardHeader>
  <CardContent>
    Drift score is healthy. 23 resources tracked.
  </CardContent>
  <CardFooter>
    <Button variant="ghost" size="sm">View runs</Button>
  </CardFooter>
</Card>

Compact (size=sm)

2 023 events

Last 24 hours

<Card size="sm">
  <CardHeader><CardTitle>2 023 events</CardTitle></CardHeader>
  <CardContent>Last 24 hours</CardContent>
</Card>

Variants

size

default(default)16px gutters / 16px row gap.
sm12px gutters / 12px row gap — for dense lists.

Anatomy

CardWrapper. Adds the chrome — radius, ring, vertical padding.
CardHeaderTop section. Auto-grids the title + action when both are present.
CardTitleBold one-line label.
CardDescriptionMuted secondary line under the title.
CardActionRight-aligned slot in the header (button, menu, badge).
CardContentMain body — pads horizontally, respects `size`.
CardFooterBottom strip with subtle muted background and top border.

Guidelines

Use a CardHeader for any card that needs a title or right-aligned action — don't compose those manually inside CardContent.The auto-grid in CardHeader handles the title/action layout for you.
Wrap a button list in a Card just to give it a border.If the content has no semantic identity as an object, plain divs with a border are cleaner.