Card

Variants

Specialized cards built on this shell — each tile opens the dedicated page.

Playground

<Card className="w-full max-w-sm"> <CardHeader> <CardTitle>Invite a teammate</CardTitle> <CardDescription>Teammates get access to every workspace.</CardDescription> </CardHeader> <CardContent>Invitations expire after seven days.</CardContent></Card>

Usage

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@sophic/portal-ui/components/ui/card";

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>Content</CardContent>
</Card>

CardAction is also exported — place it inside CardHeader to pin an action (e.g. a button or badge) to the top-right corner of the card.

Props

Card also accepts every native <div> attribute, as do all subcomponents.

Tokens

Card reads --card-* for radius, hairline ring, and title type. Fallbacks keep apps without those tokens on the previous look.

Changelog

• 2 October 2026 — Footer matches Confirm Dialog: hairline only, no muted fill; actions end-aligned with a consistent gap.
• 24 September 2026 — A very light shadow sits around the section frame. The inset hairline stays. Full notes
• 23 September 2026 — Padding comes from the shared card inset (20px). Full notes
• 17 September 2026 — Interactive product tiles (productCardClassName) use the same hover wash as T-bill cards (bg-hover). Full notes
• 8 September 2026 — Product hairline is inset 0.5px border/card (card/default). Full notes
• 8 September 2026 — Corners use 16px (--radius-2xl) on product tokens. Full notes
• 19 August 2026 — Styles live in a CSS module; look and tokens unchanged. Full notes
• 10 August 2026 — Product default drops solid specular rim for hairline. Full notes
• 29 July 2026 — Dark mode restores a readable card hairline. Full notes
• 24 July 2026 — Variant tiles for related product cards. Full notes
• 22 July 2026 — Edge is a 0.5px Neutral 200 ring (--card-ring). Full notes