Surfaces & utilities

Components/Surfaces & utilities

Surface

Two token-based surface treatments.

Live preview

Surface

A standard semantic surface.

Soft surface

A tinted background for secondary content.

View HTML / PlaygroundHTML source

example.htmlHTML

<div class="sl-grid sl-md:cols-2 sl-gap-4">
  <section class="sl-panel sl-stack">
    <h3 class="sl-text-xl">Surface</h3>
    <p>A standard semantic surface.</p>
  </section>
  <section class="sl-panel sl-panel--soft sl-stack">
    <h3 class="sl-text-xl">Soft surface</h3>
    <p>A tinted background for secondary content.</p>
  </section>
</div>

HTML source · enable JavaScript for the playground10 lines · UTF-8

Separator

A semantic horizontal separator.

Live preview

First content group

Second content group

View HTML / PlaygroundHTML source

example.htmlHTML

<div class="sl-stack">
  <p>First content group</p>
  <hr class="sl-separator" />
  <p>Second content group</p>
</div>

HTML source · enable JavaScript for the playground5 lines · UTF-8

Toolbar

A wrapping controls group with normal Tab navigation; custom roving toolbar focus requires application logic.

Live preview

View HTML / PlaygroundHTML source

example.htmlHTML

<div class="sl-toolbar" role="group" aria-label="Library navigation tools">
  <a class="sl-btn sl-btn--sm" href="/components/">Library</a
  ><a class="sl-btn sl-btn--sm sl-btn--outline" href="/layouts/">Layouts</a
  ><a class="sl-btn sl-btn--sm sl-btn--ghost" href="/themes/">Themes</a>
</div>

HTML source · enable JavaScript for the playground5 lines · UTF-8

ScrollShadow

Scroll-local background gradients indicate overflow without a script.

Live preview

Note 1: use native scrolling, the keyboard or a touchpad to explore this region.

Note 2: use native scrolling, the keyboard or a touchpad to explore this region.

Note 3: use native scrolling, the keyboard or a touchpad to explore this region.

Note 4: use native scrolling, the keyboard or a touchpad to explore this region.

Note 5: use native scrolling, the keyboard or a touchpad to explore this region.

Note 6: use native scrolling, the keyboard or a touchpad to explore this region.

Note 7: use native scrolling, the keyboard or a touchpad to explore this region.

Note 8: use native scrolling, the keyboard or a touchpad to explore this region.

Note 9: use native scrolling, the keyboard or a touchpad to explore this region.

Note 10: use native scrolling, the keyboard or a touchpad to explore this region.

View HTML / PlaygroundHTML source

example.htmlHTML

<div
  class="sl-scroll-shadow sl-stack"
  tabindex="0"
  role="region"
  aria-label="Scrollable example notes"
>
  <p>
    Note 1: use native scrolling, the keyboard or a touchpad to explore this region.
  </p>
  <p>
    Note 2: use native scrolling, the keyboard or a touchpad to explore this region.
  </p>
  <p>
    Note 3: use native scrolling, the keyboard or a touchpad to explore this region.
  </p>
  <p>
    Note 4: use native scrolling, the keyboard or a touchpad to explore this region.
  </p>
  <p>
    Note 5: use native scrolling, the keyboard or a touchpad to explore this region.
  </p>
  <p>
    Note 6: use native scrolling, the keyboard or a touchpad to explore this region.
  </p>
  <p>
    Note 7: use native scrolling, the keyboard or a touchpad to explore this region.
  </p>
  <p>
    Note 8: use native scrolling, the keyboard or a touchpad to explore this region.
  </p>
  <p>
    Note 9: use native scrolling, the keyboard or a touchpad to explore this region.
  </p>
  <p>
    Note 10: use native scrolling, the keyboard or a touchpad to explore this region.
  </p>
</div>

HTML source · enable JavaScript for the playground37 lines · UTF-8

Classes beginning with sl- come from StyloftCSS. Examples with demo- classes also use our optional demo extension CSS ↓. Load it after the core to reproduce those details.