ComponentsLumos 0.0.1Open component

Section

One band of the page: its background, its vertical rhythm, and the container that centres what is inside it.

Section is the component every page is built out of. It renders a <section>, gives it the theme colors you ask for, sets the space above and below, and puts a centred container inside, so you never write a container yourself.

astro

<Section theme="dark" paddingTop="large">
  <Heading tag="h2">Everything here is centred and capped</Heading>
  <Paragraph>And spaced by the container's gap.</Paragraph>
</Section>

<Section theme="dark" paddingTop="large">
  <Heading tag="h2">Everything here is centred and capped</Heading>
  <Paragraph>And spaced by the container's gap.</Paragraph>
</Section>

Props

Prop	Type	Default	What it does
`render`	`boolean`	`true`	Set to `false` to skip this component and everything inside it.
`theme`	`"inherit" \| "light" \| "dark" \| "brand"`	`"inherit"`	Colors for this band and everything in it. `inherit` keeps whatever the page is using.
`paddingTop`	`"none" \| "even" \| "small" \| "medium" \| "large" \| "navoverlap"`	`"medium"`	Space above the content. `even` uses the site margin, for a band that should feel inset rather than spacious. `navoverlap` clears a fixed nav.
`paddingBottom`	`"none" \| "even" \| "small" \| "medium" \| "large" \| "navoverlap"`	`"medium"`	Space below the content, from the same scale.
`gap`	`"0"–"8" \| "small" \| "medium" \| "large"`	`"8"`	Space between the section's direct children. This is the spacing you should be adjusting, rather than adding margins.
`align`	`"start" \| "center" \| "end"`	None	How the container's children line up across it. Unset leaves them at the start.
`fullHeight`	`boolean`	`false`	Makes the section at least as tall as the viewport. For hero bands.
`containerClass`	`string`	None	Classes for the inner container rather than the section itself. Useful for a utility that should affect the content, not the band.
`containerAttrs`	`HTMLAttributes<"div">`	`{}`	Any other attributes for the inner container, such as an `id` to link to.

The background slot

Anything passed to the background slot is positioned to fill the section, behind the content, and ignores the mouse. It is where an image, a video or a gradient goes.

astro

<Section theme="dark">
  <Img slot="background" src={photo} alt="" class="cover" />
  <Overlay slot="background" variant="gradient" />
  <Heading tag="h1" variant="display">Over the top of it</Heading>
</Section>

<Section theme="dark">
  <Img slot="background" src={photo} alt="" class="cover" />
  <Overlay slot="background" variant="gradient" />
  <Heading tag="h1" variant="display">Over the top of it</Heading>
</Section>

There is no special handling behind that. Section puts its own children in a container, and one rule in src/styles/patterns.css takes every direct child that is not that container and lays it over the section:

src/styles/patterns.css

.section > :where(:not(.container)) {
  pointer-events: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.section > :where(:not(.container)) {
  pointer-events: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

pointer-events: none is the "ignores the mouse" above: a background can never swallow a click meant for a button over it. The :where() is there to keep the rule out of your way. It weighs nothing, so the whole selector counts as the single class .section rather than as a stack of them, and the rule sits in the patterns layer — so a utility on the background element wins by layer, and one class of your own ties and wins on order. You can move or resize a background without an override or an !important.

The spacing scale

The three main steps are fluid, so they grow with the viewport instead of jumping.

Name	Value	Notes
`small`	`48px → 80px`	Bands that sit close together, or a run of related sections.
`medium`	`64px → 112px`	The default. Most sections want this.
`large`	`88px → 160px`	A band that needs to breathe, usually the first or last on a page.
`even`	`the site margin`	Matches the horizontal edge spacing, so the band reads as inset rather than as a section.
`navoverlap`	`160px → 224px`	Top padding for the first section under an overlapping fixed nav.
`none`	`0`	No padding at all, for a band that supplies its own.

Under a fixed nav

When the layout is set to overlap, the nav sits over the page rather than pushing it down. Give the first section paddingTop="navoverlap" so its content clears the bar.

astro

<BaseLayout overlap>
  <Section paddingTop="navoverlap">
    <Heading tag="h1" variant="display">Under the bar, not behind it</Heading>
  </Section>
</BaseLayout>

<BaseLayout overlap>
  <Section paddingTop="navoverlap">
    <Heading tag="h1" variant="display">Under the bar, not behind it</Heading>
  </Section>
</BaseLayout>