Card

A panel with a colored left edge. One accent property drives both the edge and the title.

/capture

92 780 blocks, mounted read-only.

Written by the frame grabber. Nothing else has a handle on it.

Installation

npx shadcn@latest add @afterglow/card

Composition

Component structure.

Card
├── CardAccent
├── CardHeader
│   ├── CardTitle
│   ├── CardDescription
│   └── CardAction
├── CardContent
└── CardFooter

Accent

One property drives the left edge and the title, so a category gets a color without a variant per category.

Beam

The default.

Signal

Something is happening.

Amber

Measured, not named.

Stripe

CardAccent runs the accent across the first third of the card's top rule. Use it on the one card that has to be read first.

/spool

Offline since the last power cycle.

The one card on the page that has to be looked at first.

API Reference

Card

accent sets --card-accent, which drives the left edge, the title and the top rule. It is how a category gets a color without a variant per category.

Prop	Type	Default
accent	string	var(--phosphor)

CardAccent

The top rule, with the card's accent running its first third. Goes first, inside Card and above CardHeader.

CardAction

A control in the header's top right. The header switches to a two-column grid when one is present.