Divider
Separate regions with a token-aligned structural band.
Preview
Import
import { SigilDivider } from "@sigil-ui/components";Usage
<SigilDivider />Structural rhythm
Horizontal Divider bands advance layout by exact multiples of
--s-grid-cell.
<SigilPageGrid>
<SigilSection snapBottomToGrid>...</SigilSection>
<SigilDivider />
<SigilSection snapBottomToGrid>...</SigilSection>
</SigilPageGrid>The md size is one full cell. Borders are visual strokes, not layout borders,
so a bordered divider remains exactly var(--s-grid-cell) tall. The top stroke
is painted one pixel above the divider box and the bottom stroke is painted
inside it; this avoids the common "everything is aligned but looks 1px low"
problem caused by real CSS borders painting inside the next box.
Do not set divider thickness tokens to calc(var(--s-grid-cell) + 1px).
The layout box must stay on full-cell intervals.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | horizontal | Divider orientation. |
pattern | DividerPattern | — | Pattern variant filling the divider band. Defaults to the surrounding page grid pattern. |
size | "xs" | "sm" | "md" | "lg" | "xl" | md | Band thickness. |
opacity | number | 1 | Pattern opacity. |
scale | number | 1 | Pattern scale multiplier. |
showBorders | boolean | true | Show border lines on the band edges. |
showCross | boolean | false | Show cross marks at endpoints. |
label | ReactNode | — | Optional label rendered in the center. |
fadeEdges | boolean | ignored | Deprecated; divider edge fades were removed so patterns render full width. |
decorative | boolean | true | If true, this is purely decorative (aria-hidden). |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-grid-line-color | Grid line color |
--s-border-muted | Border muted |
--s-divider-border | Divider border |
--s-divider-thickness-md | One full-cell divider height |
--s-grid-cell | Structural vertical period |
--s-border-width-thin | Border width thin |
--s-border-style | Border style |
--s-border | Border |
--s-cross-stroke | Cross stroke |
--s-background | Background |
--s-text-muted | Text muted |
--s-font-mono | Font mono |