Theme
Frame
One section of a marketing page in the framed column: full-bleed, with the content at layout.wide between hairlines at both sides from 40rem. Sections stack into one unbroken column, each ruled off from the last; there are no alternating backgrounds. Hero and FeatureSection draw it themselves, and Frame is for any other section.
Examples
The first section, with no rule above it.
The second, ruled off from the first.
Props
Frame
One section of a marketing page in the framed column: full-bleed, with the content in `layout.wide` between hairlines at both sides. Stacked, sections draw one unbroken column down the page, each separated from the last by a rule.
| Prop | Type | Default | Description |
|---|---|---|---|
as? | "aside" | "div" | "section" | "div" | The element: a section for a titled part of the page, a div otherwise. |
id? | string | — | |
labelledBy? | string | — | The id of the heading that names a section, which makes it a region. |
ruled? | boolean | true | A rule along the column's top, separating it from the section above. |
spacing? | "none" | "md" | "lg" | "lg" | Space above and below the content: lg between a page's sections, md for a tighter band. |
flushEnd? | boolean | false | No space under the content, for a bled grid or a cropped screenshot that ends the section. |
children | ReactNode | — |
Accessibility
- A section labelled by its heading (labelledBy) is a named region; without a heading, render it as a div.
- The rules are borders, so they hold in forced-colours mode, and they are decorative: border on surface is exempt from contrast.
- Built from logical properties and container queries: it mirrors in right-to-left text and follows the section's own width.