Data components demo
Structured data display components styled through the frozen
astro-* vocabulary. All visual styles resolve to
--astro-* design tokens.
Avatar row
Four small avatars using
astro-avatar.is-sm with palette
backgrounds from --astro-palette-1 through
--astro-palette-4.
Stat cards
Metric display using
astro-stat-value (page-title font-size,
primary color) and astro-helper for the label.
4,218 Total users
98.7% Uptime
1.2 s Avg. response
Profile cards
Avatar + name + role using
astro-card, astro-avatar.is-md,
astro-subsection-title, astro-helper, astro-button.
Alice Martin Admin
Bob Chen Editor
Media card
Card with image placeholder, title, description, and CTA using
astro-card, astro-section-title,
astro-body, astro-button.
Intro to Design Tokens
Design tokens are the smallest atomic values in a design system — spacing,
colour, typography — stored as CSS custom properties and shared across every
component.
Data table
Five-row table with edit and delete actions using
astro-table
(scoped th/td styles) and astro-icon-button.
| Name | Role | Actions | |
|---|---|---|---|
| Alice Martin | alice@example.com | Admin | |
| Bob Chen | bob@example.com | Editor | |
| Carol Davis | carol@example.com | Viewer | |
| Diana Prince | diana@example.com | Editor | |
| Evan Torres | evan@example.com | Viewer |