Skip to content
Static Bloom

Surfaces

.sb-card

Section titled “.sb-card”

A card groups related content on a raised panel: a hairline border, a large radius and a small shadow. Every part is optional, and each pads itself, so omit the ones you do not need.

Courier run

Watson to Japantown, no questions asked.

Pick up the package at the market and deliver it before the curfew.
<article class="sb-card">
  <header class="sb-card-header">
    <h3 class="sb-card-title">Courier run</h3>
    <p class="sb-card-description">Watson to Japantown, no questions asked.</p>
  </header>
  <div class="sb-card-body">Pick up the package at the market and deliver it before the curfew.</div>
  <footer class="sb-card-footer">
    <button type="button" class="sb-btn sb-btn-sm">Accept</button>
    <button type="button" class="sb-btn sb-btn-sm sb-btn-ghost">Later</button>
  </footer>
</article>
Class Effect
sb-card The surface: flex column, panel fill, hairline, radius lg, shadow-sm.
sb-card-header Top part; stacks a title and a description.
sb-card-header-row Header laid out as a row, title left and an accessory (a badge) right.
sb-card-title Display-face heading. Use a real heading element.
sb-card-description Muted supporting line.
sb-card-body Main content, 0.875rem text.
sb-card-footer Row of actions at the bottom.
sb-card-footer-divided Adds a hairline above the footer.
sb-card-footer-end Aligns footer content to the end.
sb-card-media Full-width 16:9 media slot; gets a bottom hairline when it is first.

Variants and states

Section titled “Variants and states”

Interactive card

The whole card is the link.

Hover lifts it 2px and tints the hairline.

Selected

Active
sb-card-selected draws a primary hairline and bloom.

sb-card-sm

Tighter padding and a medium radius.

sb-card-lg

Wider padding and an xl radius.

Roomier card for feature blocks.

sb-card-flat

No shadow, subtle canvas fill.

With media

A 16:9 media slot on top.

Use an img.sb-card-media or any block with the class.
<a class="sb-card sb-card-interactive" href="#variants-and-states">
  <header class="sb-card-header">
    <h3 class="sb-card-title">Interactive card</h3>
    <p class="sb-card-description">The whole card is the link.</p>
  </header>
  <div class="sb-card-body">Hover lifts it 2px and tints the hairline.</div>
</a>
<article class="sb-card sb-card-interactive sb-card-selected" tabindex="0">
  <header class="sb-card-header sb-card-header-row">
    <h3 class="sb-card-title">Selected</h3>
    <span class="sb-badge sb-badge-success sb-badge-dot">Active</span>
  </header>
  <div class="sb-card-body">sb-card-selected draws a primary hairline and bloom.</div>
</article>
<article class="sb-card sb-card-sm">
  <header class="sb-card-header"><h3 class="sb-card-title">sb-card-sm</h3></header>
  <div class="sb-card-body">Tighter padding and a medium radius.</div>
</article>
<article class="sb-card sb-card-lg">
  <header class="sb-card-header">
    <h3 class="sb-card-title">sb-card-lg</h3>
    <p class="sb-card-description">Wider padding and an xl radius.</p>
  </header>
  <div class="sb-card-body">Roomier card for feature blocks.</div>
  <footer class="sb-card-footer sb-card-footer-divided sb-card-footer-end">
    <button type="button" class="sb-btn sb-btn-sm sb-btn-outline">Divided, end-aligned footer</button>
  </footer>
</article>
<article class="sb-card sb-card-flat">
  <header class="sb-card-header"><h3 class="sb-card-title">sb-card-flat</h3></header>
  <div class="sb-card-body">No shadow, subtle canvas fill.</div>
</article>
<article class="sb-card">
  <div class="sb-card-media" role="img" aria-label="Skyline placeholder"></div>
  <header class="sb-card-header">
    <h3 class="sb-card-title">With media</h3>
    <p class="sb-card-description">A 16:9 media slot on top.</p>
  </header>
  <div class="sb-card-body">Use an img.sb-card-media or any block with the class.</div>
</article>
Class Effect
sb-card-sm Tighter padding, radius md.
sb-card-lg Wider padding, radius xl.
sb-card-flat No shadow and a subtle canvas fill instead of the panel fill.
sb-card-glass Glass fill with a backdrop blur, for use over imagery.
sb-card-interactive Pointer cursor, hover lift of 2px with a primary-tinted hairline and bloom, pressed state, focus ring. Use it on an <a> or a focusable element.
sb-card-selected Primary hairline and bloom.

An interactive card also shows the selected look when it carries aria-selected="true" or aria-pressed="true", so toggle those attributes instead of the class when the card is a choice.

sb-card-glass

Glass fill with blur.

For short text over a busy backdrop.
<article class="sb-card sb-card-glass">
  <header class="sb-card-header">
    <h3 class="sb-card-title">sb-card-glass</h3>
    <p class="sb-card-description">Glass fill with blur.</p>
  </header>
  <div class="sb-card-body">For short text over a busy backdrop.</div>
</article>

.sb-hud-panel

Section titled “.sb-hud-panel”

The in-game overlay frame: a glass fill with a backdrop blur for panels over game footage, a tube hairline and four L-shaped corner brackets in the accent color. Pair it with sb-scanlines for a screen texture. How legible its text stays depends on the flavor and the scene: see HUD legibility.

Vitals

Glass fill, corner brackets and scanlines.
sb-hud-panel + sb-scanlines

Objective

Meet the fixer at the bar. 2.4 km

Wanted

The alarm modifier pulses the bloom.

Heat

No-brackets drops the corner ticks.

Job done

Payout 4,500 EDS.

Solid

Opaque fill, no blur.

Neutral

Chrome accent for system panels.
<section class="sb-hud-panel sb-scanlines">
  <header class="sb-hud-panel-header">
    <h3 class="sb-hud-panel-title">Vitals</h3>
    <div class="sb-hud-panel-actions">
      <button type="button" class="sb-btn sb-btn-ghost sb-btn-icon sb-btn-xs" aria-label="Close"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
    </div>
  </header>
  <div class="sb-hud-panel-body">Glass fill, corner brackets and scanlines.</div>
  <footer class="sb-hud-panel-footer">sb-hud-panel + sb-scanlines</footer>
</section>
<section class="sb-hud-panel sb-hud-panel-info sb-hud-panel-compact">
  <header class="sb-hud-panel-header"><h3 class="sb-hud-panel-title">Objective</h3></header>
  <div class="sb-hud-panel-body">Meet the fixer at the bar. <span class="sb-badge sb-badge-info sb-badge-sm">2.4 km</span></div>
</section>
<section class="sb-hud-panel sb-hud-panel-danger sb-hud-panel-alarm">
  <header class="sb-hud-panel-header"><h3 class="sb-hud-panel-title">Wanted</h3></header>
  <div class="sb-hud-panel-body">The alarm modifier pulses the bloom.</div>
</section>
<section class="sb-hud-panel sb-hud-panel-warning sb-hud-panel-no-brackets">
  <header class="sb-hud-panel-header"><h3 class="sb-hud-panel-title">Heat</h3></header>
  <div class="sb-hud-panel-body">No-brackets drops the corner ticks.</div>
</section>
<section class="sb-hud-panel sb-hud-panel-success">
  <header class="sb-hud-panel-header"><h3 class="sb-hud-panel-title">Job done</h3></header>
  <div class="sb-hud-panel-body">Payout 4,500 EDS.</div>
</section>
<section class="sb-hud-panel sb-hud-panel-secondary sb-hud-panel-solid">
  <header class="sb-hud-panel-header"><h3 class="sb-hud-panel-title">Solid</h3></header>
  <div class="sb-hud-panel-body">Opaque fill, no blur.</div>
</section>
<section class="sb-hud-panel sb-hud-panel-neutral">
  <header class="sb-hud-panel-header"><h3 class="sb-hud-panel-title">Neutral</h3></header>
  <div class="sb-hud-panel-body">Chrome accent for system panels.</div>
</section>
Class Effect
sb-hud-panel The frame. Accent is the active primary.
sb-hud-panel-header Header row.
sb-hud-panel-title Panel title in the accent color, uppercase mono, with a leading dot; use a heading element.
sb-hud-panel-actions Right-aligned controls in the header.
sb-hud-panel-body Content area.
sb-hud-panel-footer Footer line.
sb-hud-panel-info, -secondary, -success, -warning, -danger, -neutral Re-colors the brackets, hairline, title and bloom (neutral uses chrome).
sb-hud-panel-compact Tighter padding.
sb-hud-panel-solid Opaque sunken-canvas fill and no blur, for pages without a backdrop.
sb-hud-panel-no-brackets Hides the corner brackets.
sb-hud-panel-alarm Pulses the bloom for urgent states (stops under reduced motion).
sb-scanlines Utility from the effects set: scanline texture painted into the background.
sb-brackets Utility that draws the same corner ticks on any element; see Effect utilities.

.sb-accordion

Section titled “.sb-accordion”

An accordion is a stack of native <details> elements. The browser provides the open and close behavior, the keyboard support (Enter and Space on the <summary>) and the open attribute; the CSS only styles it.

What renders in-game?

Every page is a bundled Chromium overlay. Native dialog, popover and details elements live in the page DOM and render fine.

With an icon and meta 3 min
Items that share name="faq" are exclusive: opening one closes the others.
Disabled item
Never visible.
<div class="sb-accordion">
  <details name="faq" open>
    <summary>What renders in-game?</summary>
    <div class="sb-accordion-content">
      <p>Every page is a bundled Chromium overlay. Native dialog, popover and details elements live in the page DOM and render fine.</p>
    </div>
  </details>
  <details name="faq">
    <summary>
      <span class="sb-accordion-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 3v18M3 12h18"/></svg></span>
      With an icon and meta
      <span class="sb-accordion-meta">3 min</span>
    </summary>
    <div class="sb-accordion-content">Items that share <code>name="faq"</code> are exclusive: opening one closes the others.</div>
  </details>
  <details name="faq" aria-disabled="true">
    <summary>Disabled item</summary>
    <div class="sb-accordion-content">Never visible.</div>
  </details>
</div>
Class Effect
sb-accordion Container with a top hairline; each child <details> gets a bottom hairline and a drawn chevron.
sb-accordion-item Gives a non-<details> wrapper the same item borders.
sb-accordion-content Padded panel body inside a <details>.
sb-accordion-icon Leading icon slot in the <summary>; mark it aria-hidden.
sb-accordion-meta Trailing note in the <summary>, before the chevron.
sb-accordion-boxed Each item is its own bordered panel; the open one gets a primary-tinted border.
sb-accordion-ghost No hairlines.
Boxed accordion
Each item is its own panel; the open one borrows a primary tint on its border.
Second panel
Closed.
Ghost accordion
No hairlines at all.
Ghost item two
Closed.
<div class="sb-accordion sb-accordion-boxed">
  <details open>
    <summary>Boxed accordion</summary>
    <div class="sb-accordion-content">Each item is its own panel; the open one borrows a primary tint on its border.</div>
  </details>
  <details>
    <summary>Second panel</summary>
    <div class="sb-accordion-content">Closed.</div>
  </details>
</div>
<div class="sb-accordion sb-accordion-ghost">
  <details>
    <summary>Ghost accordion</summary>
    <div class="sb-accordion-content">No hairlines at all.</div>
  </details>
  <details>
    <summary>Ghost item two</summary>
    <div class="sb-accordion-content">Closed.</div>
  </details>
</div>
Selector Effect
details[open] Open item: the chevron rotates and turns primary, the summary brightens and the content fades in.
summary:focus-visible Focus ring on the summary.
[aria-disabled="true"] Dimmed summary with pointer events off. Set it on the <details>; inert gives the same look and also blocks the keyboard.

Native behaviors worth knowing:

  • Give several <details> the same name to make them exclusive (the browser closes the others).
  • Nested .sb-accordion elements indent and drop their outer hairlines.