✍️ Tag, Status
Updated 2026-05-19
Confidence anatomy low variants medium motion medium a11y high content low
Overview
Section titled “Overview”Use for status. Can be interactive (removable) or static metadata.
Anatomy
- 1 Containerthe bounding surface — frames the data presentation
- 2 Title or heading (optional)identifies what the data represents
- 3 Primary contentthe data itself — text, value, chart, table cells, badge label
- 4 Supporting metadata (optional)timestamps, units, counts, attribution
- 5 Visual indicator (optional)color dot, icon, badge, or status pill
- 6 Action affordance (optional)expand, drill-in, dismiss, or copy
Variants
| Status |
|---|
Fail |
Warning |
Loading |
Maintenance |
Scheduled |
Queued |
Stopped |
Sleeping |
Offline |
Pending |
Success |
Motion
Skeleton Loading
rows/cards reveal with skeleton placeholders during load
Staggered Entrance — Lists, Table Rows, Search Cards
lists, tables, search-result-cards enter with staggered fades
Accordion (expand/collapse)
Slug: accordion-expand-collapse
collapsible cards/sections expand at the accordion pace