Card title
A brief description of what this card represents in a list of similar items.
brio regression
Visual baseline gallery -- one section per component group.
This page is used by the playwright test suite to ensure visual consistency. Snapshots are saved in the `tests/visual/snapshots` directory. During the test, playwright will compare current snapshots to the baseline snapshots in that directory. Local-only at present, may look at including snapshots in LFS at some point.
button
atom -- color, emphasis, size, shape, state
Color and emphasis
Outlined
Size
State
Block
badge
atom -- small label / counter
Color
Default
Neutral
Accent
Success
Warning
Danger
Shape
Pill
Square
7
spinner
atom -- loading indicator
Size
dismiss
atom -- close button glyph
divider
atom -- horizontal / labeled / vertical separator
Plain horizontal
Labeled
or
Vertical (in a cluster)
Item A
Item B
Item C
Item B
Item C
icon-box
atom -- colored icon container
Color
Size
input -- text family
atom -- text input, textarea, select with size and state variants
Size
State
Textarea
Select
input -- checkbox / radio / switch
atom -- boolean and choice inputs
Checkbox
Radio
Switch
input -- range
atom -- range slider with size variants
Size
State
input-group
atom -- composed inputs with addons
Default (group owns border)
$
USD
Joined (per-child borders)
https://
nav-link
atom -- navigation link with current state
code
atom -- inline and block code
Inline (in prose)
The --space-md token resolves to a fluid clamp.
Block
function greet(name) {
return `Hello, ${name}`;
}Block with header
script.js
const total = items.reduce((sum, n) => sum + n, 0);card
slotted container -- semantic article with optional figure / footer; variants for compact / flat / featured / interactive
Default
Compact
Tighter padding, smaller heading. For dense lists.
Variants
Flat
No border, no shadow. Sits on a heavier surface.
Featured
Thick primary border. Use sparingly for the singular highlight.
Interactive
Stretched anchor on the heading; whole card is the hit area.
alert
themed veneer -- pairs with .media for figure / body composition
Color
Default
A neutral notification with no chromatic tinting.
Heads up
Informational message tinted with the primary color.
Saved
Your changes have been recorded.
Heads up
Something is off but the system still works.
Failure
The operation could not complete.
Compact
Tighter padding for dense layouts.
toast
themed veneer -- ephemeral notification; rendered statically here without its fixed container
details
native disclosure -- callout colors and layout variants
Default (closed)
What's in the box?
A native disclosure with brio chrome. Click to expand.
Open
Open by default
The body content is visible while [open] is set.
Color callouts
Info callout
Tinted with the primary color.
Success callout
Tinted with the success color.
Warning callout
Tinted with the warning color.
Danger callout
Tinted with the danger color.
Layout variants
Flush
No border around the box; only a subtle bottom rule.
Filled
Background fill when open.
dropdown
action menu inside a popover -- rendered flat for snapshotting (popover attribute removed so it stays in flow)
Default
With group label
Account
Workspace
dialog
modal overlay -- rendered as inline div for snapshotting; native dialog uses commandfor=show-modal in real usage
Default
Confirm action
Are you sure you want to proceed? This action affects all selected items.
Danger
Delete project
This will permanently delete the project and all of its files. This action cannot be undone.
Sizes
Small
24rem max-width.
Large
48rem max-width for content-heavy modals.
drawer
side-panel overlay -- rendered as inline div for snapshotting
Default
Filter results
End-anchored, large
Quick view
A wider drawer for record detail panels.
tooltip
annotation -- force-shown via regression-only override; arrow rotates per placement variant
Tooltip on top
Tooltip on bottom
Tooltip start
Tooltip end
popover
floating surface -- rendered flat (no popover attribute); shows chrome / size variants
Default
Default popover surface with prose padding and shadow-lg elevation.
With header
Quick filters
Header takes the popover's full width via negative margins keyed to scoped padding.
Size
Small (14rem).
Default (20rem).
Large (32rem) for richer content.
table
semantic wrapper -- striped, bordered, compact, hoverable variants
Default
| Item | Status | Count |
|---|---|---|
| Alpha | Active | 42 |
| Bravo | Pending | 17 |
| Charlie | Stopped | 3 |
Striped + bordered + compact
| Region | Lead | Revenue |
|---|---|---|
| North | Asha | 12,400 |
| South | Marcus | 9,800 |
| East | Priya | 15,200 |
| West | Otto | 7,100 |
prose
semantic wrapper -- typography defaults for unclassed HTML
tabs
ARIA-first wrapper -- horizontal / pills / vertical / stretched
Default (horizontal)
Overview panel content.
Pills
Day view selected.
Stretched
All items.
sidebar-nav
semantic wrapper -- sidebar navigation with current state and collapsible groups
stacked-list
semantic wrapper -- vertical row list with leading / trailing slots
Default (divided)
-
First row title
Description of the first row item.
New -
Second row
Another item with a brief explanation.
-
Interactive row
Whole row is the hit area via stretched anchor.
›
Compact
Compact row
Tighter padding.
Another compact row
For dense lists.
navbar
semantic wrapper -- sticky page header; responsive across widths
sidebar
semantic wrapper -- fixed-width side panel (hidden below 64rem)
stack
composition primitive -- vertical rhythm (default / snug / tight)
A
B
C
snug A
snug B
snug C
tight A
tight B
tight C
cluster
composition primitive -- horizontal flow with wrap; alignment variants
Default
One
Two
Three
Four
Between
Start
End
End
Right
Aligned
grid
composition primitive -- auto-fill responsive columns (--grid-min)
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
flank
composition primitive -- two-column with stacking fallback below content min
Main content area that grows to fill the remaining space.
switcher
composition primitive -- horizontal until threshold, then stacked
Pane A
Pane B
Pane C
cover
composition primitive -- vertically centered region with edge anchors
Centered
frame
composition primitive -- aspect-ratio container
16:9
1:1
reel
composition primitive -- horizontal scrolling row
Item 1
Item 2
Item 3
Item 4
Item 5
center
composition primitive -- max-width with auto margins
This block is constrained to a readable max-width and centered horizontally with auto margins.
media
composition primitive -- figure + body row with non-shrinking figure
Figure-plus-text composition
A leading icon, image, or other figure paired with growing body text. Used by alert and toast veneers.
avatar
extra -- user / entity image with status, sizes, and grouping
Size
A
B
CD
EF
Shape and status
R
K
L
M
SQ
Group
A
B
C
+3
breadcrumb
extra -- navigation path with current state; condenses below 30rem
Default
Condensed
pagination
extra -- page navigation with current state; condenses below 28rem
Default
Compact
progress
extra -- bar and ring; color and size variants
Bar (size)
Bar (color)
Ring
25%
60%
100%
75%
rating
extra -- read-only star display
Size
skeleton
extra -- placeholder shimmer for loading states
stat
extra -- key metric display with optional description
Default + compact
Revenue
$12,450
+12.5% vs last month
Active users
1,294
-3.2% WoW
stepper
extra -- sequential step indicator; condenses below 30rem
Default
timeline
extra -- vertical event timeline with markers
Deployment succeeded
-- production rollout completed.
Approval pending
-- waiting on reviewer.
Build queued
-- triggered by commit b2e1f3.
trend
extra -- directional indicator for deltas
+12.5%
-8
0.0%
brio-color-mode
extra -- theme switcher (custom element; renders after JS upgrades)
Default group
Cycle
brio-dropzone
extra -- file drop area (custom element; static-only render here)