Band

Code

Copy the markup

<main id="main-content" class="o-container o-stack">
  <!-- other sections -->
  <section class="o-stack luz-band" aria-labelledby="last-seats-title">
    <h2 id="last-seats-title">Registration closes on 30 April</h2>
    <p>The hall holds 400 people, and the Two days ticket sold out last year.</p>
    <div class="o-actions">
      <a class="luz-btn luz-btn--primary" href="/register/">Register now</a>
    </div>
  </section>
</main>

Variants and options

There are no variants: one class on any block. The layout inside is yours: .o-stack above spaces its children.

How it works

CSS from @luz-ds/core. No JavaScript.

• The band stays inside the page's column, so its text keeps the column's start edge. The tint is a box-shadow that spreads past the block, cut off above and below by clip-path. A shadow adds no scrollable width; 100vw would, whenever the page has a scrollbar. In an .o-shell the tint stops at .o-main.
• Any block can be a band: a <section> with its heading, or a plain <div>.
• Put it on the page itself, inside the main column. Inside a card or an element with its own background the tint is drawn over that surface, and it runs out of the element when that element is wider than the window.

Without JavaScript

Nothing changes: the band is CSS.

Keyboard and ARIA

The band has no interaction, and adds no role.

• A <section> named with aria-labelledby becomes a region landmark; a <div> band is just a block.
• The tint carries no meaning, and it is not what groups the band: the section and its heading are. Without the tint (forced colors, print) the grouping stays.
• Controls inside the band keep their own focus ring. The 48 px above and below leaves room for it at 200 percent text and at 320 px wide.

Contrast and focus are in the Design tab.

Design

When to use

Use a band for a call to act near the end of a long page, or for one pause in the middle of it.

When not to use

Do not band every section: when everything stands out, nothing does.

• One band for each screen height at most; two in a row read as a new background, not as a call to act.
• Do not use the tint to say something (a warning, a status): it carries no meaning, and forced colors remove it. Use an alert.
• Do not put a band inside a card or on a --luz-surface area, or around the whole page. In dark mode the primary button falls to 2.7:1 against a tint laid over --luz-surface, under the 3:1 a control's edge needs.
• Do not put a .luz-btn--secondary on the band: its fill is the tint's own colour, and it reads as plain text.

Do and don't

Writing the content

On a band, the heading says why now, not the action: "Registration closes on 30 April", not "Register".

• Add one sentence of support, one primary button and, if you need a second way, one outline button.

Contrast and focus

The band sets its content on --luz-brand-subtle, laid over the page.

Measured from the token values of each mode, rounded down. Needs is the WCAG 2.2 AA minimum: 4.5:1 for text, 3:1 for focus rings and the edges of controls.

• Focus: the band takes none; what is inside keeps its own ring, --luz-focus-ring, drawn 4 px out. The band's 48 px of padding keeps it inside the tint.
• Thin pair: the primary button's fill is 3.0:1 against the tint in dark mode. Its label is 4.9:1 and names the control, so the control is still identified; keep the band on the page, never on a surface.
• Forced colors: the tint is removed and two 1 px CanvasText rules mark the band's top and bottom.

Tokens it uses

The 2 tokens that components/band.css reads, by family. Each family links to its page, with the values in every mode. In Figma they are variables with the same names: see Tokens in Figma.

Color

--luz-brand-subtle

Spacing and sizing

--luz-space-2xl

Keyboard and ARIA are in the Code tab.