Sigil Full Bleed
A layout primitive that breaks out of the content column to span the full viewport width while maintaining the structural grid.
Preview
Import
import { SigilFullBleed } from "@sigil-ui/components";Usage
Use SigilFullBleed inside a constrained content column when you need a section to break out to full width — hero images, background patterns, or edge-to-edge dividers.
<Container>
<Paragraph>Constrained content above.</Paragraph>
<SigilFullBleed>
<div className="bg-[var(--s-surface)] py-16">
This spans the full viewport width.
</div>
</SigilFullBleed>
<Paragraph>Constrained content below.</Paragraph>
</Container>Token integration
| CSS Variable | Used for |
|---|---|
--s-page-margin | Negative margin calculation |
--s-content-max | Content width reference |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes |
children | ReactNode | — | Full-bleed content |