Section
<pura-section> renders a semantic <section> with vertical padding from the space scale, keeping spacing between page regions consistent. Add the container attribute to center its content within a comfortable reading max-width, and set bg to fill the section with a design token or any CSS color. It is a layout primitive meant to wrap the major blocks of a page.
Preview
<script type="module" src="/pura/lib/section.js"></script>
<!-- Centered, readable content block -->
<pura-section container>
<h2>Section heading</h2>
<p>Content sits within a comfortable max-width and is centered on the page.</p>
</pura-section>
<!-- Tinted, full-width band with tighter padding -->
<pura-section bg="subtle" py="4">
<p>A background band that spans the full width of its parent.</p>
</pura-section>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
py | number | 6 | Vertical padding on the space scale (1 to 6). Maps to the --pura-space-{n} token, falling back to --pura-space-6. |
container | boolean | false | When present, centers the content within a readable max-width (65rem) using auto inline margins. |
bg | string | transparent | Background fill. A bare token name (e.g. "subtle") resolves to its --pura-* variable; any other value (e.g. a hex color) is used verbatim as a CSS value. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/section.js"></script>import "./pura/lib/section.js";