LandingBand
A full-width visual band with shaped edges, background imagery and theme-aware surfaces.
LandingBandLandingBand extends to the viewport edges, including within a documentation layout. Its content is decorative by default: the band sets pointer-events to none.
A shaped section boundary
The bottom edge creates a transition into the next section. Keep the important copy away from the clipped edge.
<LandingBand
tone="accent"
height="14rem"
bottomEdge="slant-up"
edgeSize="2rem"
alignItems="center"
>
<SectionHeader
eyebrow="BUILD WITH PURESTACK"
title="One coherent interface"
subtitle="Content, components and a shared theme."
/>
</LandingBand>Two deliberate edges
Each edge has an independent direction and starting position.
<LandingBand
tone="info"
variant="surface"
topEdge="slant-down"
bottomEdge="slant-down"
edgeSize="1.5rem"
topEdgeStart="20%"
bottomEdgeStart="40%"
paddingTop="2rem"
paddingBottom="2rem"
>
<SectionHeader
title="Space for a new chapter"
subtitle="A visual pause between sections."
/>
</LandingBand>Behavior and accessibility
Use backgrounds as decoration and keep meaningful image content in a normal image element with alt text. Edge clipping needs enough padding. The full-width bleed is intentional; avoid placing a band in a narrow card. Interactive children must explicitly opt back into pointer events.
API reference
LandingBand contract
Props below are the public template API. RefOrValue accepts a literal or a reactive ref; bind refs with a colon-prefixed attribute. Native attributes and events can be passed through the component root.
tone
RefOrValue<SemanticTone> - Default
inherited
Semantic intent: neutral, accent, secondary, info, success, warning, danger, feature, custom or ghost. The active skin supplies the colors.
variant
RefOrValue<ComponentVariant> - Default
surfaceAlt
Visual treatment. Accepts solid, surface, surfaceAlt, spotlight, glass, flat, flatAlt, flatSolid, outlineFill, outline, subtle, subtleBtn, link, sheen, underline, rail, bracket or none.
variantMode
RefOrValue<ComponentVariantMode> - Default
stateless
Use stateless for content surfaces; stateful enables the treatment’s hover, focus and active styles. It does not add interaction handlers.
image
RefOrValue<string> - Default
not set
Background image URL. It becomes a CSS background and has no accessible alternative text.
imageFit
RefOrValue<LandingBandImageFit> - Default
cover
Background sizing value: cover, contain, fill, none or scale-down are accepted by the type; CSS background-size reliably supports cover, contain and valid CSS sizes.
imagePosition
RefOrValue<string> - Default
center
CSS background-position value, such as center or center top.
display
RefOrValue<CSSProps['display']> - Default
flex
CSS display mode for the section.
alignItems
RefOrValue<CSSProps['alignItems']> - Default
start
CSS align-items for the band’s content.
justifyContent
RefOrValue<CSSProps['justifyContent']> - Default
center
CSS justify-content for the band’s content.
height
RefOrValue<string> - Default
16rem
CSS minimum height, not a fixed height. Content can make the band taller.
marginTop
RefOrValue<string> - Default
0
CSS top margin.
marginBottom
RefOrValue<string> - Default
0
CSS bottom margin.
paddingTop
RefOrValue<string> - Default
1em
Top padding; a slanted top edge adds edgeSize automatically.
paddingBottom
RefOrValue<string> - Default
1em
Bottom padding; a slanted bottom edge adds edgeSize automatically.
topEdge
RefOrValue<LandingBandEdge> - Default
flat
Top clipping edge: flat, slant-up or slant-down.
bottomEdge
RefOrValue<LandingBandEdge> - Default
flat
Bottom clipping edge: flat, slant-up or slant-down.
edgeSize
RefOrValue<string> - Default
4rem
Vertical depth of the slant, expressed as a CSS length.
topEdgeStart
RefOrValue<string> - Default
0%
Horizontal start of the top diagonal as a CSS length or percentage.
bottomEdgeStart
RefOrValue<string> - Default
0%
Horizontal start of the bottom diagonal as a CSS length or percentage.
Composition
Default slot: band content. Register defineLandingBandComponent. The active doc layout variables keep full-width edges aligned as sidebars open and close.