Skip to content
← Inventory

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 centered. RSC-safe. Import from "@desk/ui/components/section".

Materials

Vertical rhythm between grouped blocks.

Usage

import { Section, SectionProps } from "@desk/ui/components/section";

Best practices

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

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

Props

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

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. Ref and event-handler types remain the default element's (HTMLDivElement). as and asChild are mutually exclusive; if both are passed, asChild wins (a dev-only warning fires).

asChildboolean

Merge props onto the child element instead of rendering a div.

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

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).

spaceResponsiveValue<SectionSpace>

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

Also exports

  • interfaceSectionProps