Card

Cards group related content and actions on a single surface. The default elevated variant carries our shadow hairline, so it reads as a lifted surface without a separate border.

Examples

Q2 Portfolio Review

Performance across all holdings this quarter.

+12.4%

Net return, year to date

Variant

Title

Description

Content

Action

Footer

Custom padding

Compact row

Use padding="none" to control spacing yourself.

Overview

Use Card to gather related content and actions onto one surface. Compose it from CardHeader, CardTitle, CardDescription, CardContent, and CardFooter; place a top-right control with CardAction.

tsx

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@rogo-technologies/ui/card";

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Supporting copy.</CardDescription>
  </CardHeader>
  <CardContent>…</CardContent>
  <CardFooter>…</CardFooter>
</Card>;

Usage

Variants

elevated (default) lifts the surface with the shadow hairline, so no border is needed. outline is a flat card-by-design with a hairline border. ghost applies no surface treatment, for when the card supplies its own background or edge.

tsx

<Card variant="elevated">…</Card>
<Card variant="outline">…</Card>
<Card variant="ghost">…</Card>

Padding

md (default) gives the standard gap-6 py-6 rhythm, with horizontal padding on each section. Use none when you need a compact or custom layout and want to set spacing on the card directly.

tsx

<Card padding="none" className="flex-row items-center gap-3 p-4">
  …
</Card>

Action

CardAction pins a control to the top-right of the header. It stays anchored regardless of how many lines the title and description take.

tsx

<CardHeader>
  <CardTitle>Usage</CardTitle>
  <CardDescription>This month.</CardDescription>
  <CardAction>
    <Button variant="ghost" size="sm" iconOnly aria-label="Usage options">
      <IconDotGrid1x3Horizontal />
    </Button>
  </CardAction>
</CardHeader>

API

Card

Prop	Type	Default	Description
`variant`	`"elevated" \| "outline" \| "ghost"`	`"elevated"`	Surface treatment. `elevated` uses the shadow hairline.
`padding`	`"md" \| "none"`	`"md"`	Built-in vertical padding and gap, or none for custom.

Additionally, Card accepts all standard HTML <div> attributes. CardHeader, CardTitle, CardDescription, CardAction, CardContent, and CardFooter each accept standard <div> attributes and a className.

Guidelines

Do

Use elevated for surfaces that should lift off the page, since it bakes the hairline into the shadow
Use outline for flat, sectioning cards that sit flush with the layout
Keep child radii concentric: the card is rounded-xl, so inner tiles should be smaller
Reach for CardAction to keep a single control aligned to the top-right

Don't

Don't add a border to an elevated card, since the hairline is already in the shadow and a second edge reads washed out (worst in dark mode)
Don't nest cards more than one level deep. Flatten the hierarchy instead
Don't stuff unrelated content into one card. Split it into separate cards

PreviousCalendar

NextChart