Library · Foundations

Section

Full-bleed section band owning background colour + vertical rhythm (--section-pad-* tokens). Sets the paired *-content text colour so children inherit correctly.

Live preview — edit theme bottom-right

---
import Section from "../components/primitives/layout/Section.astro";
---
<Section tone="base-100" padBlock="sm">
  <p class="type-body">tone="base-100" · padBlock="sm"</p>
</Section>
<Section tone="secondary" padBlock="sm">
  <p class="type-body">tone="secondary" — text inherits secondary-content</p>
</Section>
<Section tone="primary" padBlock="sm">
  <p class="type-body">tone="primary" — text inherits primary-content</p>
</Section>
<Section tone="neutral" padBlock="none">
  <p class="type-body">tone="neutral" · padBlock="none"</p>
</Section>

Props

Name	Type	Required	Description
`tone`	`'base-100' \| 'base-200' \| 'base-300' \| 'primary' \| 'secondary' \| 'accent' \| 'neutral'`	—	Colour tone; sets the background and its paired *-content text colour (default: 'base-100')
`padBlock`	`'none' \| 'sm' \| 'md' \| 'lg'`	—	Vertical padding: multiples of the --section-pad-block token (default: 'md')
`as`	`'section' \| 'div' \| 'header' \| 'footer' \| 'aside'`	—	Element to render (default: 'section')
`id`	`string`	—	id for anchor navigation
`class`	`string`	—	Additional classes
`[key: string]`	`unknown`	—	HTML attributes
`(slot)`	`children`	—	Section content — typically a Container.

Example with all props

<Section tone="secondary" padBlock="md" as="section" id="about" class="about-band">
  <Container>…</Container>
</Section>