default
muted
brand
gradient
gradient-primary
gradient-brand
<Section.Root spacing="md" background="muted">
<Container>…</Container>
</Section.Root>Section owns the band, Container owns the reading width. Nest them rather
than putting padding on either one.
API
| Prop | Type | Default | |
|---|---|---|---|
background | "brand" | "default" | "gradient" | "gradient-brand" | "gradient-primary" | "muted" | — | Surface behind the section. The three gradients read as brand moments —
one per page is usually one enough. brand also flips the foreground to
primary-foreground. |
spacing | "lg" | "md" | "none" | "sm" | "xl" | — | Vertical padding, which grows at md and up. none when the section
supplies its own rhythm. |
render | ComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Plus every <section> prop. Source: landing/components/section.tsx.