Feedback
.sb-alert
Section titled “.sb-alert”An alert is an inline message about the state of the page or an action. It is a tonal wash with a one-pixel intent hairline and a title in the intent color. The icon, content and actions are laid out on a grid that collapses when a part is missing.
Set role="status" for information that can wait and role="alert" for something the user must hear immediately. Alerts rendered at page load are not announced; add the role only to alerts inserted after load.
Info (default)
A tonal wash with a hairline in the intent color. Learn more.
Success
Resource deployed.
Warning
The server restarts in five minutes.
Danger
The connection to the session was lost.
<div class="sb-alert sb-alert-info" role="status"> <svg class="sb-alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg> <div class="sb-alert-content"> <p class="sb-alert-title">Info (default)</p> <p class="sb-alert-description">A tonal wash with a hairline in the intent color. <a class="sb-link" href="#sb-alert">Learn more</a>.</p> </div></div><div class="sb-alert sb-alert-success" role="status"> <div class="sb-alert-content"> <p class="sb-alert-title">Success</p> <p class="sb-alert-description">Resource deployed.</p> </div></div><div class="sb-alert sb-alert-warning" role="alert"> <div class="sb-alert-content"> <p class="sb-alert-title">Warning</p> <p class="sb-alert-description">The server restarts in five minutes.</p> </div> <div class="sb-alert-actions"><button type="button" class="sb-btn sb-btn-xs sb-btn-soft sb-btn-warning">Snooze</button></div></div><div class="sb-alert sb-alert-danger" role="alert"> <div class="sb-alert-content"> <p class="sb-alert-title">Danger</p> <p class="sb-alert-description">The connection to the session was lost.</p> </div> <div class="sb-alert-actions"><button type="button" class="sb-btn sb-btn-xs sb-btn-danger">Retry</button></div></div>| Class | Effect |
|---|---|
sb-alert |
The box. Defaults to the info intent. |
sb-alert-info, -primary, -secondary, -neutral, -success, -warning, -danger |
Intent color. |
sb-alert-solid |
Filled with the intent and its on-accent ink. |
sb-alert-outline |
Transparent background with a stronger hairline. |
sb-alert-icon |
Leading icon cell; give the <svg> aria-hidden="true". |
sb-alert-content |
Column that holds the title and description. |
sb-alert-title |
Title, in the intent color. |
sb-alert-description |
Supporting text. |
sb-alert-actions |
Trailing cell for buttons. |
Solid success
Filled with the intent.
Outline
Transparent background.
Primary
Follows the active accent.
Secondary
Neutral, description only.
<div class="sb-alert sb-alert-solid sb-alert-success" role="status"> <div class="sb-alert-content"><p class="sb-alert-title">Solid success</p><p class="sb-alert-description">Filled with the intent.</p></div></div><div class="sb-alert sb-alert-outline sb-alert-info" role="status"> <div class="sb-alert-content"><p class="sb-alert-title">Outline</p><p class="sb-alert-description">Transparent background.</p></div></div><div class="sb-alert sb-alert-primary" role="status"> <div class="sb-alert-content"><p class="sb-alert-title">Primary</p><p class="sb-alert-description">Follows the active accent.</p></div></div><div class="sb-alert sb-alert-secondary" role="status"> <div class="sb-alert-content"><p class="sb-alert-title">Secondary</p></div></div><div class="sb-alert sb-alert-neutral" role="status"> <div class="sb-alert-content"><p class="sb-alert-description">Neutral, description only.</p></div></div>.sb-badge
Section titled “.sb-badge”A badge is a small status label. It is soft by default, and takes an intent or any of the twelve palette accents. Soft text mixes its color with the foreground per flavor (--sb-soft-ink), so it stays AA on its own tint.
Soft (default)
Solid
Outline
Primary
Secondary
Neutral
Info
Success
Warning
Danger
Solid
Outline
sm
md
lg
<div class="sb-cluster"> <span class="sb-badge">Soft (default)</span> <span class="sb-badge sb-badge-solid">Solid</span> <span class="sb-badge sb-badge-outline">Outline</span></div><div class="sb-cluster"> <span class="sb-badge sb-badge-primary">Primary</span> <span class="sb-badge sb-badge-secondary">Secondary</span> <span class="sb-badge sb-badge-neutral">Neutral</span> <span class="sb-badge sb-badge-info">Info</span> <span class="sb-badge sb-badge-success">Success</span> <span class="sb-badge sb-badge-warning">Warning</span> <span class="sb-badge sb-badge-danger">Danger</span></div><div class="sb-cluster"> <span class="sb-badge sb-badge-solid sb-badge-success">Solid</span> <span class="sb-badge sb-badge-outline sb-badge-danger">Outline</span> <span class="sb-badge sb-badge-sm">sm</span> <span class="sb-badge sb-badge-md">md</span> <span class="sb-badge sb-badge-lg">lg</span></div>| Class | Effect |
|---|---|
sb-badge |
Base badge (soft, medium). |
sb-badge-soft, -solid, -outline |
Variant. Soft is the default. |
sb-badge-primary, -secondary, -neutral, -info, -success, -warning, -danger |
Intent color. |
sb-badge-sm, -md, -lg |
Height 1.125rem, 1.375rem (default) and 1.75rem. |
Accents
Section titled “Accents”All twelve palette accents are classes: sb-badge-plasma, -laser, -ember, -sodium, -halogen, -acid, -coolant, -frost, -ion, -ultraviolet, -orchid and -chrome. They combine with the variants.
plasma
laser
ember
sodium
halogen
acid
coolant
frost
ion
ultraviolet
orchid
chrome
plasma
ion
acid
sodium
orchid
<div class="sb-cluster"> <span class="sb-badge sb-badge-plasma">plasma</span> <span class="sb-badge sb-badge-laser">laser</span> <span class="sb-badge sb-badge-ember">ember</span> <span class="sb-badge sb-badge-sodium">sodium</span> <span class="sb-badge sb-badge-halogen">halogen</span> <span class="sb-badge sb-badge-acid">acid</span> <span class="sb-badge sb-badge-coolant">coolant</span> <span class="sb-badge sb-badge-frost">frost</span> <span class="sb-badge sb-badge-ion">ion</span> <span class="sb-badge sb-badge-ultraviolet">ultraviolet</span> <span class="sb-badge sb-badge-orchid">orchid</span> <span class="sb-badge sb-badge-chrome">chrome</span></div><div class="sb-cluster"> <span class="sb-badge sb-badge-solid sb-badge-plasma">plasma</span> <span class="sb-badge sb-badge-solid sb-badge-ion">ion</span> <span class="sb-badge sb-badge-solid sb-badge-acid">acid</span> <span class="sb-badge sb-badge-outline sb-badge-sodium">sodium</span> <span class="sb-badge sb-badge-outline sb-badge-orchid">orchid</span></div>Modifiers
Section titled “Modifiers”
Online
Live
square
upper
glow
icon
<div class="sb-cluster"> <span class="sb-badge sb-badge-dot sb-badge-success">Online</span> <span class="sb-badge sb-badge-dot sb-badge-solid sb-badge-danger">Live</span> <span class="sb-badge sb-badge-square sb-badge-ion">square</span> <span class="sb-badge sb-badge-upper sb-badge-outline sb-badge-sodium">upper</span> <span class="sb-badge sb-badge-glow sb-badge-solid">glow</span> <span class="sb-badge sb-badge-coolant"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg>icon</span></div><div class="sb-cluster"> <a class="sb-badge sb-badge-outline" href="#modifiers">link badge</a> <button type="button" class="sb-badge sb-badge-soft sb-badge-secondary">button badge</button></div>| Class | Effect |
|---|---|
sb-badge-dot |
Prepends a status dot in the badge color. |
sb-badge-square |
Square corners. |
sb-badge-upper |
Uppercase, wider tracking. |
sb-badge-glow |
Adds a bloom. |
A direct child <svg> is sized to the badge. The class also works on <a> and <button>, which then get a hover and :focus-visible style.
.sb-progress
Section titled “.sb-progress”Progress uses the native <progress> element, so value and max drive both the fill and the accessible value. Without value the bar is indeterminate and shows a sweeping animation (the :indeterminate state). Always give it an accessible name with aria-label or a <label>.
<div class="sb-stack"> <progress class="sb-progress sb-progress-primary" value="65" max="100" aria-label="Primary"></progress> <progress class="sb-progress sb-progress-secondary" value="55" max="100" aria-label="Secondary"></progress> <progress class="sb-progress sb-progress-neutral" value="45" max="100" aria-label="Neutral"></progress> <progress class="sb-progress sb-progress-info" value="40" max="100" aria-label="Info"></progress> <progress class="sb-progress sb-progress-success" value="80" max="100" aria-label="Success"></progress> <progress class="sb-progress sb-progress-warning" value="30" max="100" aria-label="Warning"></progress> <progress class="sb-progress sb-progress-danger" value="15" max="100" aria-label="Danger"></progress></div>| Class | Effect |
|---|---|
sb-progress |
The bar: panel track, hairline, rounded, bloom on the fill. Primary, medium. |
sb-progress-primary, -secondary, -neutral, -info, -success, -warning, -danger |
Fill color. |
sb-progress-xs, -sm, -md, -lg |
Height 0.25, 0.375, 0.5 (default) and 0.75rem. |
sb-progress-glow |
Stronger bloom on the fill. |
sb-progress-square |
Square ends. |
sb-progress-striped |
Diagonal stripes on the fill. |
sb-progress-row |
Grid row that places a leading label, the bar and a trailing value on one line. |
Download72%
<div class="sb-stack"> <progress class="sb-progress sb-progress-xs" value="60" max="100" aria-label="Extra small"></progress> <progress class="sb-progress sb-progress-sm" value="60" max="100" aria-label="Small"></progress> <progress class="sb-progress sb-progress-md" value="60" max="100" aria-label="Medium"></progress> <progress class="sb-progress sb-progress-lg" value="60" max="100" aria-label="Large"></progress> <progress class="sb-progress sb-progress-glow" value="60" max="100" aria-label="Glow"></progress> <progress class="sb-progress sb-progress-square sb-progress-lg" value="60" max="100" aria-label="Square"></progress> <progress class="sb-progress sb-progress-striped sb-progress-lg sb-progress-info" value="60" max="100" aria-label="Striped"></progress> <progress class="sb-progress" aria-label="Indeterminate"></progress> <div class="sb-progress-row"><span>Download</span><progress class="sb-progress" value="72" max="100" aria-label="Download"></progress><span>72%</span></div></div>.sb-meter and .sb-stat
Section titled “.sb-meter and .sb-stat”A meter is a segmented HUD bar for health, stamina, heat or ammo. sb-stat wraps a label, the meter and a value. The fill width comes from the public custom property --sb-value (0 to 100); --sb-segments (default 10) sets the number of segments.
--sb-value only draws the bar. Give the element role="meter" with aria-valuemin, aria-valuemax, aria-valuenow and a name, and keep the two in sync from your script.
PRI80
SEC60
NEU50
INF40
HP92/100
HEAT30
DNG20
ARM8
<div class="sb-stack"> <div class="sb-stat" role="meter" aria-label="Primary" aria-valuemin="0" aria-valuemax="100" aria-valuenow="80" style="--sb-value: 80"> <span class="sb-stat-label">PRI</span><span class="sb-meter"><span class="sb-meter-fill"></span></span><span class="sb-stat-value">80</span> </div> <div class="sb-stat sb-stat-secondary" role="meter" aria-label="Secondary" aria-valuemin="0" aria-valuemax="100" aria-valuenow="60" style="--sb-value: 60"> <span class="sb-stat-label">SEC</span><span class="sb-meter"><span class="sb-meter-fill"></span></span><span class="sb-stat-value">60</span> </div> <div class="sb-stat sb-stat-neutral" role="meter" aria-label="Neutral" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" style="--sb-value: 50"> <span class="sb-stat-label">NEU</span><span class="sb-meter"><span class="sb-meter-fill"></span></span><span class="sb-stat-value">50</span> </div> <div class="sb-stat sb-stat-info" role="meter" aria-label="Info" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40" style="--sb-value: 40"> <span class="sb-stat-label">INF</span><span class="sb-meter"><span class="sb-meter-fill"></span></span><span class="sb-stat-value">40</span> </div> <div class="sb-stat sb-stat-success" role="meter" aria-label="Health" aria-valuemin="0" aria-valuemax="100" aria-valuenow="92" style="--sb-value: 92"> <span class="sb-stat-label">HP</span><span class="sb-meter"><span class="sb-meter-fill"></span></span><span class="sb-stat-value">92<small>/100</small></span> </div> <div class="sb-stat sb-stat-warning" role="meter" aria-label="Heat" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30" style="--sb-value: 30"> <span class="sb-stat-label">HEAT</span><span class="sb-meter"><span class="sb-meter-fill"></span></span><span class="sb-stat-value">30</span> </div> <div class="sb-stat sb-stat-danger" role="meter" aria-label="Danger" aria-valuemin="0" aria-valuemax="100" aria-valuenow="20" style="--sb-value: 20"> <span class="sb-stat-label">DNG</span><span class="sb-meter"><span class="sb-meter-fill"></span></span><span class="sb-stat-value">20</span> </div> <div class="sb-stat sb-stat-critical" role="meter" aria-label="Armor" aria-valuemin="0" aria-valuemax="100" aria-valuenow="8" style="--sb-value: 8"> <span class="sb-stat-label">ARM</span><span class="sb-meter"><span class="sb-meter-fill"></span></span><span class="sb-stat-value">8</span> </div></div>| Class / property | Effect |
|---|---|
sb-stat |
Row wrapper: label, meter and value. Primary by default. |
sb-stat-label |
Short caption, uppercase mono. |
sb-stat-value |
Numeric readout; a <small> inside is the muted unit or maximum. |
sb-stat-primary, -secondary, -neutral, -info, -success, -warning, -danger |
Bar color (neutral is chrome). |
sb-stat-critical |
Danger color; the fill pulses (stops under reduced motion). |
sb-stat-sm, -md, -lg |
Bar height 0.375, 0.5 (default) and 0.75rem. |
sb-stat-glow |
Sets the value readout in the bar color with a text glow. |
sb-stat-stacked |
Two-column layout: label and value on the first row, the bar full width underneath. |
sb-meter |
The bar alone; works without the stat wrapper. |
sb-meter-fill |
The filled part inside sb-meter. |
sb-meter-continuous |
A solid bar instead of segments. |
sb-meter-reverse |
Fills from the end. |
sb-meter-primary, -secondary, -neutral, -info, -success, -warning, -danger, -critical |
Bar color. |
sb-meter-sm, -md, -lg |
Bar height. |
--sb-value |
0 to 100, the fill percentage. |
--sb-segments |
Segment count, default 10. |
SM65
LG65
Stacked, 20 segments70%
<div class="sb-stack"> <div class="sb-stat sb-stat-sm" role="meter" aria-label="Small" aria-valuemin="0" aria-valuemax="100" aria-valuenow="65" style="--sb-value: 65"> <span class="sb-stat-label">SM</span><span class="sb-meter"><span class="sb-meter-fill"></span></span><span class="sb-stat-value">65</span> </div> <div class="sb-stat sb-stat-lg sb-stat-glow sb-stat-info" role="meter" aria-label="Large with glow" aria-valuemin="0" aria-valuemax="100" aria-valuenow="65" style="--sb-value: 65"> <span class="sb-stat-label">LG</span><span class="sb-meter"><span class="sb-meter-fill"></span></span><span class="sb-stat-value">65</span> </div> <div class="sb-stat sb-stat-stacked sb-stat-success" role="meter" aria-label="Stacked" aria-valuemin="0" aria-valuemax="100" aria-valuenow="70" style="--sb-value: 70; --sb-segments: 20"> <span class="sb-stat-label">Stacked, 20 segments</span><span class="sb-stat-value">70%</span><span class="sb-meter"><span class="sb-meter-fill"></span></span> </div> <span class="sb-meter sb-meter-continuous sb-meter-secondary" role="meter" aria-label="Continuous" aria-valuemin="0" aria-valuemax="100" aria-valuenow="55" style="--sb-value: 55"><span class="sb-meter-fill"></span></span> <span class="sb-meter sb-meter-reverse sb-meter-warning sb-meter-lg" role="meter" aria-label="Reverse" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40" style="--sb-value: 40"><span class="sb-meter-fill"></span></span></div>.sb-spinner
Section titled “.sb-spinner”A spinner is a ring with a glowing head. It inherits the surrounding text color unless you add an intent. Mark it role="status" with an aria-label. Under prefers-reduced-motion the rotation slows down instead of stopping.
Card content under a spinner overlay.
<div class="sb-cluster"> <span class="sb-spinner sb-spinner-xs" role="status" aria-label="Loading"></span> <span class="sb-spinner sb-spinner-sm" role="status" aria-label="Loading"></span> <span class="sb-spinner sb-spinner-md" role="status" aria-label="Loading"></span> <span class="sb-spinner sb-spinner-lg" role="status" aria-label="Loading"></span> <span class="sb-spinner sb-spinner-xl" role="status" aria-label="Loading"></span></div><div class="sb-cluster"> <span class="sb-spinner sb-spinner-primary" role="status" aria-label="Loading"></span> <span class="sb-spinner sb-spinner-secondary" role="status" aria-label="Loading"></span> <span class="sb-spinner sb-spinner-neutral" role="status" aria-label="Loading"></span> <span class="sb-spinner sb-spinner-info" role="status" aria-label="Loading"></span> <span class="sb-spinner sb-spinner-success" role="status" aria-label="Loading"></span> <span class="sb-spinner sb-spinner-warning" role="status" aria-label="Loading"></span> <span class="sb-spinner sb-spinner-danger" role="status" aria-label="Loading"></span> <span class="sb-spinner sb-spinner-dots sb-spinner-primary" role="status" aria-label="Loading"><i></i></span> <span class="sb-spinner sb-spinner-dots sb-spinner-lg" role="status" aria-label="Loading"><i></i></span></div><div class="sb-card" style="min-height: 7rem"> <div class="sb-card-body">Card content under a spinner overlay.</div> <div class="sb-spinner-overlay"><span class="sb-spinner sb-spinner-lg sb-spinner-primary" role="status" aria-label="Loading"></span></div></div>| Class | Effect |
|---|---|
sb-spinner |
The ring, in the current text color. |
sb-spinner-xs, -sm, -md, -lg, -xl |
Size. |
sb-spinner-primary, -secondary, -neutral, -info, -success, -warning, -danger |
Color. |
sb-spinner-dots |
Three pulsing dots instead of a ring. Needs one empty <i> child. |
sb-spinner-overlay |
Centers a spinner over its positioned parent. |
.sb-skeleton
Section titled “.sb-skeleton”A skeleton is a placeholder block with a shimmer. Size it with width and height or one of the shape classes, and mark the region that is loading with aria-busy="true" until the real content replaces the placeholders.
Inline placeholder in text.
<div class="sb-cluster" style="align-items: flex-start"> <div class="sb-skeleton sb-skeleton-circle"></div> <div class="sb-stack sb-stack-2" style="flex: 1"> <div class="sb-skeleton sb-skeleton-text" style="width: 40%"></div> <div class="sb-skeleton sb-skeleton-text"></div> <div class="sb-skeleton sb-skeleton-text"></div> </div></div><div class="sb-skeleton sb-skeleton-rect" style="max-width: 20rem"></div><p>Inline <span class="sb-skeleton sb-skeleton-inline"></span> placeholder in text.</p><div class="sb-cluster"> <div class="sb-skeleton sb-skeleton-static" style="width: 8rem; height: 2rem"></div> <div class="sb-skeleton sb-skeleton-neon" style="width: 8rem; height: 2rem"></div> <div class="sb-skeleton" style="width: 8rem; height: 2rem"></div></div>| Class | Effect |
|---|---|
sb-skeleton |
Placeholder block with the default shimmer. |
sb-skeleton-text |
One line of text (1em tall, small radius). |
sb-skeleton-circle |
2.5rem circle, for avatars. |
sb-skeleton-rect |
16:9 rectangle, for images. |
sb-skeleton-inline |
Inline placeholder inside a sentence. |
sb-skeleton-static |
No shimmer. The shimmer is also off under prefers-reduced-motion. |
sb-skeleton-neon |
Neon-tinted shimmer. |