Sections
Rendered
Section eyebrow
Full-bleed background, contained text.
`Section` spans edge to edge with its bloom backdrop. `Container` clamps the inner content to `--content-w` (1240 px) with the canonical side gutter `--pad-x`.
Anatomy
import { Section, Container } from "@matter/components";
<Section style={{ background: "var(--bloom-peach)" }}>
<Container maxWidth={1240}>
<span className="eyebrow">Section eyebrow</span>
<h2 className="h-2">Full-bleed background, contained text.</h2>
</Container>
</Section>Section carries the full-bleed background. Container clamps the inner content to --content-w (1240 px). Section padding uses --section-y; side gutter uses --pad-x.