# Section

A "section" is composed of five primitives that almost always travel together: `.page-section` (themed background + vertical padding) → `.page-container` (max-width + gutters) → `.section-header` (heading + lede + optional CTA) → `.section-heading-1..4` (typographic scale) and `.section-paragraph` (body text token).



## Install

```ts
import "elements-kit/ui/styles.css";

import "elements-kit/ui/styles/palette/gray.css";
import "elements-kit/ui/styles/neutral/gray.css";

import "elements-kit/ui/marketing/marketing.css";
```

## Composition

```html
<section class="page-section">
  <div class="page-container">
    <header class="section-header">
      <h2 class="section-heading section-heading-2">Title</h2>
      <p class="section-paragraph">Lede paragraph.</p>
    </header>

    <!-- rivers, pillars, etc. -->
  </div>
</section>
```

Standard nesting: **page-section → page-container → (section-header) + (river+ | pillar+ | testimonial+ | cta-banner | statistic+)**.

## Page section

A page-level chunk. Themed background (`--color-background`), vertical padding.

```html
<section class="page-section">…</section>
```

No data attributes.

> **Don't**
>
> Nest one `.page-section` inside another.

## Page container

Pure layout container. Applies `--page-padding-*` gutters and `--page-max-width` cap, centered.

```html
<div class="page-container">…</div>
```

No data attributes. Place directly inside `.page-section`.

| CSS variable           | Purpose      | Fallback |
| ---------------------- | ------------ | -------- |
| `--page-padding-left`  | left gutter  | `1rem`   |
| `--page-padding-right` | right gutter | `1rem`   |
| `--page-max-width`     | max width    | `72rem`  |

`--page-gutter-left` / `--page-gutter-right` are derived from the three above: the distance from the viewport edge to the container's content box. Read them to line an element outside the container up with the content inside it. `100cqi` reads the viewport unless an ancestor sets `container-type: inline-size` — set that on a page wrapper (never on `body`, which would trap `position: fixed` children) to drop the classic scrollbar width from the math.

## Section header

Heading + paragraph + optional CTA cluster. Sits above rivers in a section.

```html
<header class="section-header" data-align="center">
  <h2 class="section-heading section-heading-2">Title</h2>
  <p class="section-paragraph">Lede.</p>
  <a href="/cta">Action</a>
</header>
```

| Attribute    | Values                      |
| ------------ | --------------------------- |
| `data-align` | `start` (default), `center` |

> **Do**
>
> One heading + one paragraph + optional CTA.

## Section heading

Four sizes, paired with a base `.section-heading` class.

```html
<h1 class="section-heading section-heading-1">Display</h1>
<h2 class="section-heading section-heading-2">Section</h2>
<h3 class="section-heading section-heading-3">Sub-section</h3>
<h4 class="section-heading section-heading-4">Eyebrow</h4>
```

| Class                | Use for                                                                   |
| -------------------- | ------------------------------------------------------------------------- |
| `.section-heading-1` | hero / display headline (48px × scaling → 60px at lg via `--font-size-9`) |
| `.section-heading-2` | section header (35px via `--font-size-8` → 48px × scaling at lg)          |
| `.section-heading-3` | river / sub-section (30px × scaling → 35px via `--font-size-8` at lg)     |
| `.section-heading-4` | minor labels (20px via `--font-size-5`)                                   |

Pick the level that matches the document outline (`<h1>` once per page), not the visual size.

## Section paragraph

Body text token. Inline `<em>` highlights in the brightest neutral.

```html
<p class="section-paragraph">
  Default copy color is <em>--neutral-11</em>.
  Emphasized inline runs are <em>--neutral-12</em>.
</p>
```

## Theming

* `--color-background` / `--color-overlay` — semantic surface tokens from [theme.css](/ui/styles). Flip with `.dark` / `.light`.
* `--neutral-1..12` / `--neutral-a1..12` — neutrals for text + borders.
* `--font-heading` — heading font family.

The whole marketing layer is wrapped in `@layer marketing`, so any unlayered host CSS wins on collision.