Dev Tools

Section

Content section wrapper. Groups related components into one block. Content-flow applies 64px between sections, Section applies 16px between its children.

Import

import Section from '../../components/utility/Section.astro';

Props

None. Section is a pure layout wrapper.

Usage

<!-- Single component -->
<Section>
  <ImageRow>
    <FigmaImage id="photo-1" variant="half" />
    <FigmaImage id="photo-2" variant="half" />
  </ImageRow>
</Section>

<!-- Group: image + caption -->
<Section>
  <ImageRow>
    <FigmaImage id="photo-3" variant="full" />
  </ImageRow>
  <TextSection heading="Lighting">
    <p>Use clean, natural lighting.</p>
  </TextSection>
</Section>

<!-- Group: columns with previews -->
<Section>
  <Columns count={3}>
    <ContentPreview size="third" contentType="text">Value 1</ContentPreview>
    <ContentPreview size="third" contentType="text">Value 2</ContentPreview>
    <ContentPreview size="third" contentType="text">Value 3</ContentPreview>
  </Columns>
</Section>

Live examples

Two sections with 64px gap between them

ImageRow
TextSection
ImageRow

Heading between sections (64px above heading, 16px below)

ContentGuide

Subsection heading

ImageRow
TextSection

Content-flow spacing rules

SituationSpacing
Between sections64px
h2 (section break)96px above
h3, h4 (block break)64px above
Heading + next element16px (tight pair)
Inside Section (gap)16px
First child0

Notes

  • Section is a flex column with gap: 16px. Child margins are reset by content-flow.
  • Use Section for any logical content group: a single component, or related components (image + caption, columns + description).
  • Headings (h2, h3, h4) stand between sections as standalone elements — not inside them.
  • Content-flow handles all vertical rhythm. Components should not set their own external margins.
Page tokens