Simple card
Title and subtitle
The card body. With no footer it closes right below the text.
Showcase index
Actions
Forms
Feedback
Content
Content
Avatars, file upload with a gallery, tables and lists.
Avatars
The portrait frame in two shapes, circle and rounded. Without an image it shows the initials over the intent ink; the stack overlaps them with the theme ring.
.es-avatar--circle, .es-avatar--rounded
.es-avatar--xs … --xl
.es-avatar-stack
Image modal
The pattern for every image a reader uploads: pick the usage, frame it, rotate, flip and apply a filter. It's how the profile photo gets changed.
<echo-image-cropper>
JPEG, PNG, WEBP, GIF or SVG.
The usage becomes the usage field of POST /api/v1/images; "other" takes a free name and sends it in snake_case. SVG isn't cropped — the modal becomes a viewer and the file goes whole.
File upload
Button and drop zone over the same label plus native input pair: click and keyboard already work, and dragging comes on top as an enhancement.
<echo-file-button>
.es-dropzone
.es-gallery
Table
The system's reference table, listing the classes of the components on this very page.
| Component | Class | Note |
|---|---|---|
| Button | .es-btn | The shape; emphasis comes with the --primary modifier. |
| Alert | .es-alert | Modifiers --info, --success, --warn and --danger. |
| Modal | .es-dialog | Applied to the native dialog; the backdrop dims on its own. |
| Collapse | .es-collapse | Applied to the native details; the chevron rotates when open. |
| Input | .es-input | Works for input and textarea; focus comes from the global rule. |
| Select | .es-select | The same ink as the input, with a click cursor. |
| Table | .es-table | Wide content scrolls in the container, never the page. |
| List | .es-card | A flat card with divide utilities; no class of its own. |
Table variants
The same columns with stripes, row hover, density and a pinned header. There is no dark variant: the theme already owns that.
.es-table--striped + .es-table--hover
| Person | Role | Status |
|---|---|---|
| Ada Lovelace | Engineering | Active |
| Grace Hopper | Platform | Active |
| Alan Turing | Research | Away |
| Edsger Dijkstra | Architecture | Inactive |
.es-table--dense
| Person | Role | Status |
|---|---|---|
| Ada Lovelace | Engineering | Active |
| Grace Hopper | Platform | Active |
| Alan Turing | Research | Away |
| Edsger Dijkstra | Architecture | Inactive |
.es-table--scroll + --table-h
The body scrolls and the header stays; the height comes from the --table-h token, set by the caller.
| Person | Role | Status |
|---|---|---|
| Ada Lovelace | Engineering | Active |
| Grace Hopper | Platform | Active |
| Alan Turing | Research | Away |
| Edsger Dijkstra | Architecture | Inactive |
| Ada Lovelace | Engineering | Active |
| Grace Hopper | Platform | Active |
| Alan Turing | Research | Away |
| Edsger Dijkstra | Architecture | Inactive |
| Ada Lovelace | Engineering | Active |
| Grace Hopper | Platform | Active |
| Alan Turing | Research | Away |
| Edsger Dijkstra | Architecture | Inactive |
| Ada Lovelace | Engineering | Active |
| Grace Hopper | Platform | Active |
| Alan Turing | Research | Away |
| Edsger Dijkstra | Architecture | Inactive |
Data table
Search, column sorting, pagination and selection over the same .es-table. Cells are drawn by slot, so an avatar or a badge fits in without the component knowing what they are.
| Situação | ||||
|---|---|---|---|---|
| Engenharia | 12 | Active | ||
| Plataforma | 8 | Active | ||
| Pesquisa | 5 | Away | ||
| Arquitetura | 3 | Inactive | ||
| Engenharia | 15 | Active |
5 of 7 rows
1 / 2
0 row(s) selected.
Cards
Header with actions on the right, body and optional footer. No fixed height: what stretches side-by-side cards is the grid.
With actions
The header menu and the footer buttons fit in the same card.
With media
The image bleeds to the edge and inherits the card radius.
System lists
Three axes, not eleven variations: density, divider and navigation item. The rest (icon, two lines, trailing action) is composition, not a new prop.
.es-list
- Ada LovelaceEngineeringActive
- Grace HopperPlatformActive
- Alan TuringResearchAway
- Edsger DijkstraArchitectureInactive
.es-list--compact
- Light and dark themes with automatic parity
- Three languages in lockstep, Spanish canonical
- The whole brand in a single block of tokens
- Liquid Glass parameterized by color-mix
.es-list + to
Card actions
Collapse, refresh, expand and remove. The first two keep their state in the card itself, because that is its own behaviour; refresh and remove are events, because the data belongs to the caller.
Every action
All four buttons in the header. Collapse uses v-show rather than v-if: the content stays in the DOM, so a form open inside does not lose what was typed.
Collapse
One click folds the card; the chevron turns and aria-expanded follows.
Refresh
The veil covers the body while the event travels to whoever actually reloads.
Remove
The card leaves the page and emits the event; bringing it back is the caller decision.
Advanced cards
Dashboard cards are not a new component: they are composition. Card, plus stat, bar, ring, list and badge, the same pieces in different arrangements.
Campaign state
8.52k visitors
Sent12.346 +0.3%
Opened8.734 +2.1%
Clicked967 -1.4%
Signed up345 +8.5%
Active project
Average 70% complete
Nuxt65%
Tailwind86%
TypeScript90%
Plyr37%
Task progress
By workstream
- 72%Experience design120 tasks
- 48%Front-end fundamentals32 tasks
- 15%API reference182 tasks
- 24%Documentation56 tasks
Upcoming webinar
Next generation front-end architecture with Nuxt, Tailwind and the group Liquid Glass language.
17 Nov 2026Date
32 minutesDuration
Media player
Plyr over the native elements. It is the template first runtime dependency, and it pays for itself through Vimeo and YouTube: each has its own embed API, and Plyr delivers all three behind a single interface.
provider="video"
provider="youtube"
provider="audio"
Lists
Two shapes over the flat card: the simple divided list and the rich one, with title, description and chip.
Simple list
- Light and dark themes with automatic parity
- Three languages in lockstep, Spanish canonical
- The whole brand in a single block of tokens
- Liquid Glass parameterized by color-mix
Rich list
- Base
Brand tokens
Four hex values and one gradient derive all the CSS.
- Style
Glass surfaces
Focal glass, flat card and lens for controls.
- Accessible
Native components
The browser's dialog, details and selects, dressed by the system.