---
title: "Section spacing"
description: "Give bands the token section rhythm with py-section, pt-section, mb-section and the other section spacing utilities."
url: https://docs.systhema.app/styling/section-spacing
version: unreleased (main)
docs_index: https://docs.systhema.app/llms.txt
---

The section spacing utilities apply the token section rhythm, `--section-padding-y`, as padding or margin. Every [`Section`](https://docs.systhema.app/components/section.md) 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 reference

<!-- generated:utilities section -->

| Class        | Styles                                                                                                                                                                                                                                                                                                                                                       |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `my-section` | `margin-top: var(--section-padding-y);`<br>`margin-bottom: var(--section-padding-y);`                                                                                                                                                                                                                                                                        |
| `mt-section` | `margin-top: var(--section-padding-y);`                                                                                                                                                                                                                                                                                                                      |
| `mb-section` | `margin-bottom: var(--section-padding-y);`                                                                                                                                                                                                                                                                                                                   |
| `py-section` | `& { padding-top: var(--section-padding-y); padding-bottom: var(--section-padding-y); }`<br>`&:where(:has( > .container > .richtext > .figure-w-screen:first-child,  > .container > .richtext > .figure-w-full:first-child,  > .container > .figure-w-screen:first-child,  > .container > .figure-w-full:first-child)) { padding-top: 0; }`<br>+ 1 more rule |
| `pt-section` | `padding-top: var(--section-padding-y);`                                                                                                                                                                                                                                                                                                                     |
| `pb-section` | `padding-bottom: var(--section-padding-y);`                                                                                                                                                                                                                                                                                                                  |

<!-- /generated -->

## Basic usage

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

```tsx preview iframe bleed height=360 title="py-section"
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.

### Margins

`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:

```tsx preview iframe bleed height=360 title="mt-section"
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`](https://docs.systhema.app/components/article.md) 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](https://docs.systhema.app/concepts/spacing-model.md#section-padding).

### Full-bleed figures

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:

```tsx preview iframe bleed height=520 title="py-section with a full-bleed figure"
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](https://docs.systhema.app/styling/figure-width.md).

## Responsive and state variants

`--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](https://docs.systhema.app/getting-started/templates/payload.md) 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.

## Customizing

The rhythm comes from `section.paddingY` in the `responsiveSizing` collection (see [Spacing and sizing](https://docs.systhema.app/reference/tokens/spacing.md#section)). Override it per breakpoint with `customTokens.responsiveSizing`:

```ts title="systhema.config.ts"
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.

## Related

- [Spacing model](https://docs.systhema.app/concepts/spacing-model.md)
- [Section](https://docs.systhema.app/components/section.md)
- [Container](https://docs.systhema.app/styling/container.md)
- [Figure width](https://docs.systhema.app/styling/figure-width.md)