SigilSection
A SigilSection component from the Sigil design system.
Import
import { SigilSection } from "@sigil-ui/components";Preview
Usage
<SigilSection>...</SigilSection>Structural rhythm
When SigilSection is rendered inside SigilPageGrid, it can snap its outer
bottom edge to the next full --s-grid-cell interval from the page-grid content
origin. This keeps following Divider bands aligned with the gutter ruler
system.
The snap padding is split across top and bottom padding so the section content stays centered in the expanded section. The fractional remainder is applied to bottom padding so the final outer boundary remains exact.
<SigilPageGrid>
<SigilSection snapBottomToGrid>
<YourContent />
</SigilSection>
<SigilDivider />
</SigilPageGrid>Use full-cell padding for section boundaries:
<SigilSection
padding="calc(2 * var(--s-grid-cell)) var(--s-section-padding-x)"
/>Use fractional cell values only for interior component spacing, not for section outer rhythm.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | — | — |
as | ElementType | section | Semantic element type. |
borderTop | boolean | — | Show a 1px top border along the section boundary. |
borderBottom | boolean | — | Show a 1px bottom border along the section boundary. |
showCrosses | boolean | — | Render cross marks at the 4 gutter intersections of each visible border. |
padding | string | — | CSS padding string. Uses var(--s-section-py) and var(--s-page-margin) by default. |
contentMax | number | — | Content max width for standalone mode (outside SigilPageGrid). |
railGap | number | — | Rail gap for standalone mode (outside SigilPageGrid). |
gutterPattern | GutterPattern | — | Gutter pattern for standalone mode. |
marginPattern | GutterPattern | — | Margin pattern for standalone mode. |
showGutterGrid | boolean | true | Show gutter grid in standalone mode. |
showMarginLines | boolean | true | Show margin lines in standalone mode. |
snapBottomToGrid | boolean | true inside SigilPageGrid | Add vertical snap padding so the section bottom lands on the next full --s-grid-cell interval. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-section-border | Section border |
--s-border-width-thin | Border width thin |
--s-border-style | Border style |
--s-grid-line-color | Grid line color |
--s-border-muted | Border muted |
--s-border | Border |
--s-section-py | Section py |
--s-page-margin | Page margin |
--s-background | Background |