Section
The section root.
The section root. Every section renderer roots at exactly one <Section>.
Full-bleed by contract: 100% width with zero margin (.tr-section, from the kit’s
base stylesheet), so consecutive sections butt edge-to-edge and a page composes as
a vertical stack with no framework-injected whitespace. A margin utility on this
root would re-open those gaps — template-kit check reports it
(section-root-margin). Padding is yours: on this root or on a child, the section’s
background still paints edge-to-edge under it.
When content needs a centered, max-width well, write it as JSX on a child:
w-full max-w-[var(--tr-container-max)] mx-auto px-[var(--tr-container-pad)].
Import from @homepages/template-kit.
Signature
Section titled “Signature”function Section(props: Props): JSX.ElementParameters
Section titled “Parameters”| Name | Type | Required | Description |
|---|---|---|---|
{ as = "section", children, className, ...rest } |
Props |
required |
Returns
Section titled “Returns”JSX.Element