Playground

Section

layout

container

Full-width page band with vertical spacing and optional background

Second layer in the hierarchy: Page → Section → Container → Stack/Grid

Provides vertical rhythm (py) only — never sets max-width or horizontal padding

import { Section } from "@everydayos/ui";

Usage

The standard pattern: Section handles vertical padding and full-width background. Container inside it handles max-width and gutters. Never put max-width directly on Section.

<Section spacing="lg">
  <Container size="xl">
    <Stack spacing="md">
      <Heading as="h2" size="l">Section Title</Heading>
      <Text variant="muted">Section content constrained by Container.</Text>
    </Stack>
  </Container>
</Section>

API

spacing

Default: md

nonexssmmdlgxltightdefaultloose

defaultpreferredrare

spacingTop

nonexssmmdlgxltightdefaultloose

spacingBottom

nonexssmmdlgxltightdefaultloose

background

Default: default

defaultmutedaccent

defaultpreferredrare

Prop	Type	Default
`className`	`string`	—
`children`*	`React.ReactNode`	—

Examples

Alternating Backgrounds

Use Section background prop to create visual rhythm between sections. Never use raw bg-* classes on divs for this — Section is the correct primitive.

{/* Default background */}
<Section spacing="lg">
  <Container size="xl">
    <Heading as="h2" size="l">Primary Section</Heading>
  </Container>
</Section>

{/* Muted background band */}
<Section spacing="lg" background="muted">
  <Container size="xl">
    <Heading as="h2" size="l">Secondary Section</Heading>
  </Container>
</Section>

{/* Back to default */}
<Section spacing="lg">
  <Container size="xl">
    <Heading as="h2" size="l">Another Section</Heading>
  </Container>
</Section>

Full-Bleed Section (no Container)

Skip Container when content should be truly full-width — e.g. a full-bleed MediaFrame. Add spacing='none' to remove vertical padding too.

<Section spacing="none">
  <MediaFrame aspect="16/9" overlay="bottomFade"
    media={<Image src="/hero.webp" fill className="object-cover" alt="" />}
  >
    <Layer position="bottom-left">
      <Container size="xl">
        <Heading as="h1" size="xl" className="text-white">Full-Bleed Hero</Heading>
      </Container>
    </Layer>
  </MediaFrame>
</Section>

Composition

Pairs well with

Container

Stack

Grid

Heading

When to avoid

Need max-width constraint — nest Container inside Section for that
Need a card or panel — use Surface instead (Section is full-width only)
Need a background on a contained box — use Surface tone instead

Patterns

Content Section

Section

Container

Stack

Heading

Text

Standard content band. Section provides the full-width background and vertical padding; Container constrains to readable width; Stack or Grid arranges content.

<Section spacing="lg">
  <Container size="xl">
    <Stack spacing="md">
      <Heading as="h2" size="l">Title</Heading>
      <Text variant="muted">Content</Text>
    </Stack>
  </Container>
</Section>

Feature Grid Section

Section

Container

Stack

Grid

Surface

Heading

Text

A muted-background section with a grid of feature cards. Section provides background; Container constrains width; Grid lays out cards.

<Section spacing="xl" background="muted">
  <Container size="xl">
    <Stack spacing="lg">
      <Heading as="h2" size="xl">Features</Heading>
      <Grid cols="3" gap="md">
        {features.map((f) => (
          <Surface key={f.title} tone="default" radius="xl" border padding="lg">
            <Stack spacing="sm">
              <Heading as="h3" size="m">{f.title}</Heading>
              <Text variant="muted">{f.description}</Text>
            </Stack>
          </Surface>
        ))}
      </Grid>
    </Stack>
  </Container>
</Section>