Layout Tokens
Layout width tokens set how wide content is allowed to grow before it stops and centers. The
section component uses them for its width attribute, and you
can use them in your own CSS to keep custom containers consistent with it.
| Token | Value | Used for |
|---|---|---|
--cw-layout-width-narrow |
45rem (720px) | A comfortable reading measure for long-form text. |
--cw-layout-width-default |
75rem (1200px) | The usual width of page content. |
--cw-layout-width-wide |
90rem (1440px) | Content that benefits from extra room. |
.my-container { max-width: var(--cw-layout-width-default); margin-inline: auto; }
Section Flush Threshold
--cw-section-flush-below isn’t a theme token. It’s a custom property a
section reads to decide how narrow it must be before its
flush attribute removes the side gutter. It defaults to 40rem and can be set on
any section or one of its ancestors.