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

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

<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.

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

No data attributes.

Page container

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

<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.

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

Section heading

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

<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.

<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. 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.