Card
Groups content about one thing.
Footer
- Nightly evalsRun every prompt in production against the 200 saved tickets at 02:00 UTC.
none
- Refund agentAnswers billing questions and issues refunds under $50 without a person.
meta
- Promote prompt v14It passed 196 of 200 refund tickets, four more than v13.
actionsdefault
Content
- Nightly evalsRun every prompt in production against the 200 saved tickets at 02:00 UTC.
paddeddefault
- Usage this weekAcross 4 agentsInput tokens1.82MOutput tokens412KCached64%
flush
Panels
- Nightly evalsRun every prompt in production against the 200 saved tickets at 02:00 UTC.
onedefault
Prompt
Summarise the refund policy in two sentences.
Output
Refunds under $50 go out at once. Anything larger waits for a person on the billing team.
two
States
- 312 runs this week
rest
- 312 runs this week
link hover
- 312 runs this week
link focus
Usage
When to use it
- Use
- One topic needs its own box on a page: an agent, a run, a decision, this week's usage.
- Use
- A decision ends in one action with a way out beside it, in the footer.
- Use
- A prompt and its output belong together: two panels in one shell.
- Not for
- A list of similar things, one per row, with no header. Use Item.
- Not for
- A white surface for rows inside your own layout. Use Panel.
- Not for
- A message about trouble the person must see. Use Alert.
- Not for
- Nothing is here yet. Use Empty state.
Rules
10 rules
- Must
- Give a CardFooter at most one variant="primary" (ink) Button; make every other action beside it variant="secondary". Because two ink pills side by side split the eye and neither reads as the next step, and the lint's one-primary fails the second.
- Must
- Use size="sm" on every Button in a CardFooter, after the CardMeta. Because the footer row is 26px plus the 3px inset, so a default Button pushes the shell open and loses the 3px edge.
- Never
- Draw the shell or the panel by hand around a Card's parts, or add a border or a shadow to Card. Because Card already wraps its body in the panel, so a second box stacks two edges, and every shadow class draws nothing in Glaze.
- Never
- Put a Card or a Panel inside a Card's panel; split rows with rule-row in CardContent flush. Because a box in a box gives two edges where one closes the group, and no one can tell which group a line ends.
- Must
- Make CardFooter a direct child of Card, after the header and content. Because Card finds its footer among its direct children; a footer wrapped in another element lands inside the panel.
- Never
- Put glass, an ink fill or a status tint on a Card; the shell is grey and the panel paper. Because glass marks what is pressed and a tinted card reads as an alert, so the card stops being the quiet frame.
- Must
- Open a page from a card with CardLink inside CardTitle, and put no Button in that card. Because CardLink covers the card with one tab stop and rings the shell, and a button under a link is pressed and followed at once.
- Must
- Give a card that holds a form role="group" and aria-labelledby its CardTitle's id. Because Card is a plain div, so a screen reader tabbing into its fields never hears what they belong to.
- Should
- Keep CardMeta to a time, a count or a model in a few words; put a sentence in CardDescription. Because the footer is one row, and meta ends in an ellipsis before an action moves.
- Should
- Name the topic in 1 to 4 words, sentence case.
Accessibility
4 checks
- Card is a plain div; add role="group" and aria-labelledby when it holds controls.
- CardLink is one tab stop; its ring is the 2px ink outline round the whole shell.
- Meta and description use text-2, 5.5:1 on paper and on the shell.
- Forced colours keep the shell's and the panel's edges as CanvasText.
Keyboard
2 keys
- Tab
- Moves to the CardLink, then to each action in the header and footer.
- Enter
- Follows the CardLink.
Edge cases
7 edge cases
- Very long title
- Wraps; the header action stays at the top end.
- Long meta beside actions
- The meta ends in an ellipsis; the actions keep their size.
- Narrow at 390
- The footer stays one row; meta truncates before a Button shrinks.
- Footer with no meta
- The actions sit at the end.
- Empty body
- Show an Empty state inside the panel, not an empty shell.
- Zoom 200%
- The header and footer grow with the text; the 3px inset stays.
- Dark theme
- The shell is a step lighter than the page and the panel a step darker than the shell.
API
5 props
Card childrenReactNodeCardContent flushbooleandefaultfalseCardActionReactNodeCardMetaReactNodeCardLinka props
Tokens
15 tokens
--shell- #f1f1f0
--paper- #ffffff
--line-faint- rgb(5 5 5 / 0.06)
--radius-shell- 14px
--radius-panel- 11px
--shell-inset- 3px
--space-3- 12px
--type-label- 500 13px/1.35 var(--font-sans)
--type-body-sm- 400 13px/1.5 var(--font-sans)
--type-caption- 400 12px/1.35 var(--font-sans)
--text-1- rgb(5 5 5 / 0.80)
--text-2- rgb(5 5 5 / 0.60)
--focus- rgb(5 5 5 / 0.80)
--focus-width- 2px
--z-raised- 10