Constrain page width and run sections edge to edge
Named container widths and edge-to-edge section bands from the layout token scale. Install with npm or copy published registry bricks.
At a glance
- Who: Developers building marketing and docs pages with capped measures and full-bleed bands.
- What: Named container widths and edge-to-edge section bands from the layout token scale.
- Use when: For page shells and banded landing sections instead of hand-written max-width, gutter and section-padding strings.
- Avoid when: For app chrome with sidebars — use the app shell; for component-internal widths — use the spacing scale.
- See also: Stack content and group titled sections, Group content in a card section
Preview
@zedtech/zedkit-ui — Container, containerVariants, ContainerProps, Section
Preview
Narrow — forms and focused flows.
Reading — long-form text measure.
Default — standard page shell.
Wide — landing sections on large viewports.
Bleed band
Background runs edge to edge; content stays capped.
Band content.
Install
pnpm add @zedtech/zedkit-uiLatest: 0.7.3 (via changesets).
Example
import { Container, Section } from "@zedtech/zedkit-ui";
<Section bleed tone="muted" spacing="lg" title="Pricing" description="What each plan includes.">...</Section>
<Container width="wide">...</Container>Wraps: class-variance-authority
Props
Prop
Type
Stack content and group titled sections
Gap-based vertical/horizontal stacks plus titled sections. Install with npm or copy published registry bricks.
Render headings and body text without raw tags
Heading levels and Text variants with theme-aware styles. Install with npm or copy published registry bricks.