Section spacing

The section spacing utilities apply the token section rhythm, --section-padding-y, as padding or margin. Every Section is spaced with it, so a band of your own that uses these classes sits on the same vertical rhythm as the rest of the page.

Quick referenceLink to this section

Basic usageLink to this section

Add py-section to a band to pad it top and bottom by the section rhythm. The hatched areas are the padding.

const hatch =
  'bg-[repeating-linear-gradient(315deg,var(--color-foundations-line-muted)_0_1px,transparent_0_50%)] bg-size-[10px_10px]'

export default function Demo() {
  return (
    <section className={`py-section w-full ${hatch}`}>
      <div className="container">
        <div className="bg-theme-500 grid h-28 place-items-center rounded-lg font-mono text-sm text-white">
          py-section
        </div>
      </div>
    </section>
  )
}

pt-section and pb-section pad one side only.

MarginsLink to this section

my-section, mt-section and mb-section apply the same value as margin. Use them to space blocks that are not bands, such as a call to action under a grid of cards:

const hatch =
  'bg-[repeating-linear-gradient(315deg,var(--color-foundations-line-muted)_0_1px,transparent_0_50%)] bg-size-[10px_10px]'

export default function Demo() {
  return (
    <div className={`container py-8 ${hatch}`}>
      <div className="bg-theme-500 grid h-20 place-items-center rounded-lg font-mono text-sm text-white">
        Cards
      </div>
      <div className="bg-theme-700 mt-section grid h-20 place-items-center rounded-lg font-mono text-sm text-white">
        mt-section
      </div>
    </div>
  )
}

Inside an Article you do not need these classes between sections: the article spaces its sections itself and collapses the padding between two neighbours that share a background. See Section padding.

Full-bleed figuresLink to this section

When a full-viewport figure (figure-w-screen) is the first or last child of the band's content (.container > .figure-w-screen, or .container > .richtext > .figure-w-screen), py-section drops its padding on that side, so the image sits flush against the band's edge:

export default function Demo() {
  return (
    <section className="py-section bg-layout-alternative w-full">
      <div className="container">
        <figure className="figure-w-screen">
          <img src="/demo-assets/mountains.webp" alt="" className="aspect-[21/9] w-full object-cover" />
        </figure>
        <p className="text-body color-body mt-8">
          The band keeps its bottom padding, because the figure is only the first child.
        </p>
      </div>
    </section>
  )
}

A figure-w-container figure does not collapse the padding. See Figure width.

Responsive and state variantsLink to this section

--section-padding-y is a responsiveSizing token, so the rhythm changes per breakpoint without a prefix. With the default tokens it is 64px on sm, 60px on md and 100px on lg; the Payload template and these docs scale it with the viewport between breakpoints. To use the rhythm only from a breakpoint up, prefix the class: md:py-section.

The same variable sets the scroll-margin-top of elements with an id (except sections and full-bleed figures), so an anchor link lands with a section's worth of space above the target.

CustomizingLink to this section

The rhythm comes from section.paddingY in the responsiveSizing collection (see Spacing and sizing). Override it per breakpoint with customTokens.responsiveSizing:

const config: SysthemaConfig = {
  customTokens: {
    responsiveSizing: {
      lg: { section: { paddingY: '120px' } },
    },
  },
}

Change the token rather than adding different classes per section, so every band and every Section keeps one rhythm. blocks.section: false removes these utilities.

RelatedLink to this section

• Spacing model
• Section
• Container
• Figure width