One horizontal stretch of a page: its ground, its texture, and the rail that holds the content to a readable measure.
There is no centering prop and no alignment prop. That absence is deliberate - 50-not-generated.md names per-section alignment controls as the tell of a generated layout, and a system that offers them gets pages that wander.
The cut is drawn as its own layer rather than on the band, because the band's ::before already carries the grain and one element cannot hold both.
import { Band } from '@redrob-labs/ui';| Prop | Type | Notes |
|---|---|---|
ground |
'base' | 'raised' | 'sunken' | 'brand' | 'wash' | 'deep' |
Which ground this stretch of page sits on. |
product |
BandProduct |
Wears one product's grounds. Only meaningful on base, wash and brand. |
threshold |
boolean | 'spectrum' |
The 40 degree cut along the band's edge. spectrum is for suite surfaces only. |
size |
'sm' | 'md' | 'lg' |
|
grain |
boolean |
false drops the grain on a non-base ground. |
texture |
'rake' | 'threshold' | 'weave' | 'rule' | 'grid' |
One of the five textures. Never behind body copy, one per page. |
textureScale |
'sm' | 'md' | 'lg' |
|
textureFade |
boolean |
false keeps the texture at full strength to the band's edge. |
wide |
boolean |
Lets the rail run wider than the default measure. |
as |
keyof React.JSX.IntrinsicElements |
The element. section by default, because a band is usually a section of the page. |
labelledBy |
string |
Id of the heading that names this band. |
id |
string |
|
className |
string |
|
children |
React.ReactNode |