Skip to content
AFTERGLOW

Search the registry

Search components and documentation.

Card

A panel with a colored left edge, or accent={false} for none. With a CardLink, the edge traces the card on hover.

pulls in@base-ui/react@afterglow/theme
/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
      • CardLink
    • CardDescription
    • CardAction
  • CardContent
  • CardFooter

With an action

CardAction puts a control in the header's top right, level with the title. The header becomes two columns when it has one, so the title and description wrap beside the control and never run under it.

/queue
Three jobs held since the paper tray ran out.
Flushing drops them without printing. The printer gets no say.

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 edge. 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.

As a link

A card does not react to the pointer until it holds a CardLink, which stretches over the whole card. Then hovering it, or tabbing to it, sends the accent around the other three edges, and the trace finishes a stripe in the same color.

relay-01
Nominal. 41 days since the last fault.
relay-02
Holding at 94% of its rated load.
relay-03
Draining the buffer. Back in about a minute.

Without an accent

accent={false} drops the left edge and leaves the title in the card's own color. Use it where no panel in a grid is the one to read first.

/etc/relay.conf
Last written 6 days ago.
A hairline box on all four sides, with the title in the card's own color.
/etc/spool.conf
Last written 6 days ago.
Neither of these is the one to read first, so neither of them claims to be.

API Reference

A card has no hover of its own, because a hover promises a click and most cards are not one. Put a CardLink in it and the card becomes the link's target. Hovering or tabbing to it then sends the accent across the top, down the right and back along the bottom, and leaving runs the same three in reverse. A link card with accent={false} has nothing to send, and its hairline lifts instead.

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. accent={false} drops the edge and leaves the title in the card's own color, for a grid of panels where none of them is the one to read first.

PropTypeDefault
accentstring | falsevar(--phosphor)

CardAccent

The card's top edge, with the accent running its first third. It lies over the border on the trace's path, so a link card's trace finishes it in the accent. Place it inside Card.

CardLink

An anchor stretched over the whole card, so the card is the target and the title is what a screen reader hears. Pass render for a router link: render={<Link href="/x" />}. Anything else interactive in the card needs relative z-10 to stay above it, as CardAction has.

CardAction

A control in the header's top right. The header switches to a two-column grid when one is present. It sits above a CardLink's stretch, so it stays clickable in a card that is also a link.