The layout classes are small, content-agnostic primitives. They set display, gap and alignment and nothing else, so they compose with every component. Tunable values are public custom properties that you can set on an element or in your own CSS.
A centered column with a maximum width and inline padding that grows with the viewport (1rem, 1.5rem, 2rem). It always fills the available width up to its maximum.
sb-stack is a vertical flex column with a consistent gap. It also resets the vertical margin of its direct children, so spacing comes from the gap alone.
<divclass="sb-cluster sb-cluster-nowrap"><spanclass="sb-badge sb-badge-soft sb-badge-info">left</span><spanclass="sb-spacer"></span><spanclass="sb-badge sb-badge-soft sb-badge-info">pushed right by sb-spacer</span></div>
</div>
Class / property
Effect
sb-cluster
Wrapping row; gap --sb-cluster-gap (default --sb-space-2).
sb-grid is a responsive grid. By default it fits as many columns as it can, each at least --sb-grid-min (16rem) wide, and collapses to one column when there is no room, so it needs no breakpoints.
sb-sidebar puts a fixed-width side element beside a fluid main element and wraps them into one column when the main would drop below half the width. The first child is the side, and the last is the main.
The roles mirror the element defaults, so any tag can carry a role: <p class="sb-h2"> looks like an h2 without changing the document outline. Use the real heading element when the text is a heading.
sb-eyebrow
sb-display-lg
sb-display-md
sb-display-sm
sb-h1 heading
sb-h2 heading
sb-h3 heading
sb-h4 heading
sb-h5 heading
sb-h6 heading
sb-lead introduces an article in a larger, muted face.
sb-prose styles unclassed rich text: the output of Markdown, a CMS or hand-written HTML. Every rule uses :where(), so they carry no specificity: a utility or component class on an element inside the prose always wins. The measure is 65ch.
A lead paragraph introduces the article. Everything below is plain HTML inside .sb-prose.
Body copy runs at a 65ch measure with relaxed leading. It carries strong, emphasis, a link, inline code, Ctrl + K, a highlight, deleted and inserted text, CEF, H2O and E = mc2.
Third level
Headings use the display face; h1 and h2 are larger, and h2 gets a hairline beneath it.
Fourth level
Fifth level in the body face
Sixth level eyebrow
Unordered items get a glowing primary dot
Nested lists
use a hollow dot
and tighter spacing
Ordered markers are mono digits in the primary ink
Second step
Task list item, done
Task list item, open
Flavor
One of dusk, midnight, blackout or daybreak.
The city never sleeps, it just dims the neon a little.
A fixer in Watson
resource "static-bloom-demo"
version "1.0.0"
web_ui_page "dist/index.html"
Button heights by size
Size
Height
xs
1.75rem
sm
2rem
md
2.5rem
lg
3rem
Collapsed details
Details use a panel fill with a hairline.
Alerts flow inside prose
Block spacing matches paragraphs.
<articleclass="sb-prose">
<pclass="sb-lead">A lead paragraph introduces the article. Everything below is plain HTML inside <code>.sb-prose</code>.</p>
<p>Body copy runs at a 65ch measure with relaxed leading. It carries <strong>strong</strong>, <em>emphasis</em>, <ahref="#sb-prose">a link</a>, <code>inline code</code>, <kbd>Ctrl</kbd> + <kbd>K</kbd>, <mark>a highlight</mark>, <del>deleted</del> and <ins>inserted</ins> text, <abbrtitle="Chromium Embedded Framework">CEF</abbr>, H<sub>2</sub>O and E = mc<sup>2</sup>.</p>
<h3>Third level</h3>
<p>Headings use the display face; h1 and h2 are larger, and h2 gets a hairline beneath it.</p>
<h4>Fourth level</h4>
<h5>Fifth level in the body face</h5>
<h6>Sixth level eyebrow</h6>
<ul>
<li>Unordered items get a glowing primary dot</li>
<li>Nested lists
<ul><li>use a hollow dot</li><li>and tighter spacing</li></ul>
</li>
</ul>
<ol>
<li>Ordered markers are mono digits in the primary ink</li>
<li>Second step</li>
</ol>
<ul>
<li><inputtype="checkbox"class="sb-checkbox sb-checkbox-sm"checkedaria-label="Done"/> Task list item, done</li>
<li><inputtype="checkbox"class="sb-checkbox sb-checkbox-sm"aria-label="To do"/> Task list item, open</li>
</ul>
<dl>
<dt>Flavor</dt>
<dd>One of dusk, midnight, blackout or daybreak.</dd>
</dl>
<blockquote>
<p>The city never sleeps, it just dims the neon a little.</p>
The effect utilities live in @layer utilities, so they win over component styles. They are decorative: the content must read correctly without them, and the animated ones stop under prefers-reduced-motion.
sb-glow, sb-glow-sm and sb-glow-lg add a bloom as a box-shadow in the current glow color, which is the primary accent unless you change it. The bloom is dimmed on Daybreak. sb-glow-<name> sets --sb-glow-color for the element and its children.
These three each take a different part of the element, so they can be combined: brackets use ::before, static uses ::after, and scanlines paint into background-image. sb-brackets and sb-static make the element position: relative (sb-static also isolates it).
