Panel Card

A Card whose header leads with an icon chip and whose footer is one action link spanning the card. The header is three tracks — mark, text, action — so the description stays aligned under the title.

tsx

1import {
2  PanelCard,
3  PanelCardHeader,
4  PanelCardIcon,
5  PanelCardHeading,
6  PanelCardTitle,
7  PanelCardDescription,
8  PanelCardAction,
9  PanelCardContent,
10  PanelCardFooterLink,
11} from "@pestoui/core"

Icon, action and footer link

PanelCardFooterLink is a real anchor spanning the card, with the arrow pushed to the far edge. The action track collapses when no PanelCardAction is present.

Knowledge storage

238 of 500 GB used

Spreadsheets and docs synced from 4 sources.

View sources

Icon tones and sizes

The chip takes the system's tone set. size="sm" is a 28px chip for a dense card.

Props

Prop	Type	Default	Description
tone	"muted" \| "selected" \| "success" \| "warning" \| "destructive" \| "info" \| "chart-1" … "chart-5"	"muted"	On PanelCardIcon. The chip's wash and ink.
size	"sm" \| "default"	"default"	On PanelCardIcon. A 28px or 36px chip.
href	string	—	On PanelCardFooterLink. The footer is an anchor, so the destination goes here; every other anchor prop is forwarded.
children	ReactNode	—	On PanelCardFooterLink. The label; a trailing arrow is added for you.
…props	React.ComponentProps<typeof Card>	—	On PanelCard. It is a Card, so Card's props apply.

PreviousPagination Next Popover

Pesto UI · 117 documented components