Sigil Gutter
Render the margin rails of a structural page grid.
Preview
Import
import { SigilGutter, Center } from "@sigil-ui/components";Usage
<div className="grid w-full grid-cols-[var(--s-space-32)_1fr_var(--s-space-32)] min-h-[calc(var(--s-grid-cell)*4)]"><SigilGutter pattern="grid" /><Center>Content between the rails</Center><SigilGutter side="right" pattern="grid" /></div>Sub-components
This component includes the following parts:
<SigilPageGrid><SigilFrame><SigilFullBleed>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
showGrid | boolean | — | Show Grid configuration. |
gridCell | number | — | Grid Cell configuration. |
pattern | GutterPattern | — | Pattern configuration. |
side | PatternSide | — | Side configuration. |
visible | boolean | — | Visible configuration. |
className | string | — | Additional classes merged with the component styles. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-grid-line-color | Grid line color |
--s-border-muted | Border muted |
--s-gutter-border | Gutter border |
--s-border-width-thin | Border width thin |
--s-border-style | Border style |
--s-background | Background |
--s-margin-border | Margin border |
--s-page-margin | Page margin |
--s-content-max | Content max |