Skip to content
Components

Section

Section is a full-width vertical-rhythm band. Unlike Container it does not constrain width - use it for full-bleed padded regions, and nest a Container inside when the content should also be centred. RSC-safe. Import from "@instruments/materia-ui/components/section".

Materials

Vertical rhythm between grouped blocks.

Usage

import { Section, SectionProps } from "@instruments/materia-ui/components/section";

Best practices

  • Section is full-width (padding only, no max-width) - nest a Container inside when content should also be centred; use Container alone when you just need the width cap.

  • Tune vertical rhythm with space (its py, default base); as/render are mutually exclusive with render winning (dev-warned).

Props

PropTypeDefaultDescription
as"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"

Render as a different host element from the closed layout vocabulary ({@link LayoutElement}). The set is deliberately closed: as="button" is a type error, because the design-system answer is the Button component. Event handlers and the ref accept any host element. as and render are mutually exclusive; if both are passed, render wins (a dev-only warning fires).

inset"none" | LayoutResponsiveValue<"base" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl"> | "gutter"

Horizontal gutter. Defaults to "gutter" - the single app-wide --page-gutter (16px, 24px from sm). Pass "none" for no gutter (e.g. a full-bleed band whose gutter is owned by the app shell), or a ComponentSize for an explicit non-standard px.

responsiveModeResponsiveMode

Responsive mode: "screen" (viewport) or "container" (container queries).

spaceLayoutResponsiveValue<SectionSpace>

Vertical rhythm (py). Responsive; defaults to base (py-6).

refLayoutRef | undefined

Ref to the rendered host, whichever element as selects.

Also exports

  • interfaceSectionProps