Band

The full-width field of a page’s section: its fill, its rules and its vertical rhythm, around the page’s column.

import { Band } from '@zitdevs/ui';

Examples

A region named by its heading, on the page’s surface, with rules at both edges:

How to engage

Three ways to work together, from one project to a managed team.

The primary band with a backdrop behind its column:

A statement across the band, clear of the pattern behind it.

import { Band, SectionHead, headingIdOf } from '@zitdevs/ui';

<Band id="engagement" fill="surface" rules="both">
  <SectionHead title="How to engage" headingId={headingIdOf('engagement')} />
</Band>

<Band fill="primary" backdrop={<div aria-hidden className="absolute inset-0 …" />}>
  <p>A statement across the band.</p>
</Band>

Props

Prop	Type	Default	Notes
fill	Fill	required	'raised' | 'surface' | 'inverse' | 'primary'.
rules	BandRules	'none'	'none' | 'top' | 'bottom' | 'both': the 1px lines at its edges.
rhythm	BandRhythm	'section'	'section' | 'strip' | 'note': 50 / 64 / 84px, 26 / 34px or 36 / 46px of padding.
id	string	—	Makes the band a region and an anchor; give its heading headingIdOf(id).
backdrop	ReactNode	—	Sits behind the column, such as a pattern. The band clips it.
children	ReactNode	—	The band’s content, inside its column.
ref	Ref<HTMLElement>	—	The <section>, or the <div> without an id.
className	string	—	Placement, such as a scroll margin.
anything else	<section> attributes	—	data-band and the like reach the element.

Exported types: BandProps, BandRules, BandRhythm. The website’s surface maps to fill as white → raised, cream → surface, navy → inverse, blue → primary.

Accessibility

• With an id it is a <section> whose aria-labelledby points at headingIdOf(id), so the region is named by its heading. Give the heading that id, or the region has no name.
• Without one it is a <div>: only a field, for a band with no heading of its own.
• A backdrop is decoration: mark it aria-hidden.

Without JavaScript

It needs none: a section around a column, rendered as a Server Component.

Theming

The fill is surface-raised, surface, surface-inverse or primary; the rules are border-subtle (top, both) and border-default (bottom). The band sets no text colour: its content does, for the field it sits on. The primary band, and any band with a backdrop, clips what is drawn past its edges.

Use instead: the band that opens a page → PageHero; the one that closes it → ClosingSection.