Section
A page band or a framed stage: the full-width strips and demo grounds a page is built from.
Live demo
Section is the structural strip between the page primitives and the page itself: a padded surface band you lay content across, or a framed stage for showing something off. As a band it carries a tone — transparent (plain), a neutral raise (quiet), or a tint from the full tone roster (any semantic role, accent variant, or named hue) — and optional bordered hairlines top and bottom, with a padding rhythm that eases off on narrow screens.
As a stage (variant="stage") it becomes an elevated, accent-tinted frame with an optional corner label: the demo ground this very site sits its live examples in. It owns surface and spacing only; arrange what goes inside with Stack, Cluster, or Grid.
When to use
How this component composes with the rest of the set.
plain hero, a quiet stats band, an accent call-to-action) for rhythm without bespoke section CSS. variant="stage" to frame a live demo or a hero preview, and pass label for a provenance tag. Stack, Cluster, or Grid. Props
6 props, straight from the manifest.
| Prop | Type | Default | Bindings | Description |
|---|---|---|---|---|
Appearance
Variants
band
A full-width surface strip, toned and optionally ruled; the default variant.
stage
A framed, elevated, accent-tinted demo ground with an optional corner label.
Sizes
sm
Tighter band padding.
md
Medium band padding.
lg
Generous band padding (default).
Anatomy
The named parts that make up the component, with their selectors.
section
The band or stage root carrying the variant, tone, border, and padding classes.
stage
The framed-demo treatment: an accent-tinted, elevated, rounded ground.
label
The optional monospace corner tag on a stage, pinned top-right.
Tokens & coverage
What the component consumes, checked live against what the algorithm produces.
Live coverage check against the xoji-default register
(derive(xojiDefault, { anchors }) →
coverComponent(manifest, register)). Every token this component
consumes must be a key the algorithm produces.
--accent
--accent-2
--accent-2-bg
--accent-3
--accent-3-bg
--accent-4
--accent-4-bg
--accent-bg
--accent-text
--bg-1
--bg-2
--black
--black-bg
--blue
--blue-bg
--border-thin
--brown
--brown-bg
--cyan
--cyan-bg
--danger
--danger-bg
--elevation-3
--font-mono
--gray
--gray-bg
--green
--green-bg
--info
--info-bg
--line
--neutral
--neutral-bg
--orange
--orange-bg
--pink
--pink-bg
--purple
--purple-bg
--radius-lg
--red
--red-bg
--ring-bg
--space-2
--space-3
--space-4
--space-5
--space-6
--space-8
--success
--success-bg
--text-xs
--warn
--warn-bg
--white
--white-bg
--yellow
--yellow-bg
Slots
The band or stage contents.
Accessibility
as for the landmark you mean: section (optionally with an aria-label), header, or footer. A plain div stage carries no landmark role, which is usually right for a demo frame. label is plain text in the flow; keep it short, since it reads before the framed content. Code
Bands and stages
The three band tones with and without rules, the padding rhythm, and the framed stage with a corner label.
<xoji-section tone="accent" bordered>
<h2>A page band</h2>
<p>A full-width strip with its own surface and hairline rules.</p>
</xoji-section>
<xoji-section variant="stage" label="live · @xoji/astro">
<xoji-button>A framed demo ground</xoji-button>
</xoji-section><script lang="ts">
import { Section, Button } from "@xoji/svelte";
</script>
<Section tone="accent" bordered>
<h2>A page band</h2>
<p>A full-width strip with its own surface and hairline rules.</p>
</Section>
<Section variant="stage" label="live · @xoji/svelte">
<Button>A framed demo ground</Button>
</Section>---
import { Section, Button } from "@xoji/astro";
---
<Section tone="accent" bordered>
<h2>A page band</h2>
<p>A full-width strip with its own surface and hairline rules.</p>
</Section>
<Section variant="stage" label="live · @xoji/astro">
<Button>A framed demo ground</Button>
</Section>