Import

import { SigilSection } from "@sigil-ui/components";

Usage

<SigilSection className="border border-dashed border-[var(--s-border)] p-4">A sigil section with token-driven padding</SigilSection>

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

Sigil Section

Preview

Import

Usage

Structural rhythm

Props

Token integration

On this page