Navigation & layoutBrick 0.1.12

Section

Section owns responsive logical block rhythm for major page and application regions. It renders one native element and adds no paint, inline measure, child arrangement, content anatomy, role, or behavior.

Live example

Built from the published package

Interactive

Responsive section rhythm

The region owns block spacing while its parent owns paint.

Choose with confidence

Know when Section is the right part

Use it when

Use Section for a thematic region that needs larger, themeable page rhythm than the local Stack spacing scale. A Section commonly contains Container, then Stack or Grid.

Choose another path when

Use Stack or Grid for child relationships, Container for measure and gutters, Surface for paint, and a qualified Block for a complete reusable content pattern. Do not use the default section host as a generic styling wrapper; choose as="div" when the content is not a thematic section.

Installation and imports

tsx

import { Section } from "@flowstack-ui/brick";
// or
import { Section } from "@flowstack-ui/brick/section";

import "@flowstack-ui/brick/styles.css";

For measured route-aware CSS, load the shared foundation once and the Section stylesheet on every route that renders it:

tsx

import "@flowstack-ui/brick/styles/core.css";
import "@flowstack-ui/brick/styles/section.css";

Add the modular stylesheet for every other Brick component the route renders. Do not combine modular styles with styles.css or tokens.css.

Public exports are Section, SectionProps, SectionElement, and SectionSpacing.

Quick start

tsx

<Section spacing={{ initial: "md", lg: "xl" }}>
  <Container>
    <VStack gap="4">
      <Text as="h2" variant="title-lg">Services</Text>
      <Grid.Root minItemSize="md" gap="4">{services}</Grid.Root>
    </VStack>
  </Container>
</Section>

Visual recipes and states

The default recipes are:

Recipe	Fluid block spacing
`none`	`0`
`sm`	`clamp(2rem, 4vw, 3rem)`
`md`	`clamp(3rem, 6vw, 5rem)`
`lg`	`clamp(4rem, 8vw, 7rem)`
`xl`	`clamp(5rem, 10vw, 9rem)`
`2xl`	`clamp(6rem, 12vw, 12rem)`

Section applies logical block padding only. It has no appearance, background, inline padding, width, display mode, gap, hover, focus, disabled, loading, validation, or motion state.

Examples

Asymmetric transition between adjacent regions

tsx

<Section spacing="lg" endSpacing="2xl">
  <Container>...</Container>
</Section>

Spacing without sectioning semantics

tsx

<Section as="div" spacing="sm">
  Supporting layout content
</Section>

Public contract

API

Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.

Prop	Values	Default
`as`	`section`, `div`, `article`, `aside`	`section`
`spacing`	responsive `none`, `sm`, `md`, `lg`, `xl`, `2xl`	`md`
`startSpacing`	responsive Section spacing	follows `spacing`
`endSpacing`	responsive Section spacing	follows `spacing`
`slot`	`string`	`section`
`children`	`ReactNode`	optional

A responsive value uses { initial, sm?, md?, lg?, xl? }. Native global, ARIA, and data attributes, events, className, style, and an HTMLElement ref pass through.

Shared responsibility

Accessibility

Section adds no role, name, landmark label, state, focus target, or keyboard behavior. The default native section represents a thematic grouping and normally contains a heading. Use as="div" when only spacing is needed. Author IDs or labels only when the document structure requires them.

Logical padding works in RTL and vertical writing modes. Section does not clip focus indicators or impose fixed dimensions.

Responsive behavior

Responsive values use Brick's mobile-first sm, md, lg, and xl breakpoints. A value continues upward until a later breakpoint overrides it. Fluid recipes continue adapting between those boundaries without JavaScript.

Use spacing for equal edges. Use startSpacing or endSpacing only when page composition requires an intentionally different transition.

Stable visual contract

Styling and tokens

Customization

Themes should override the named recipe variables. One deliberate region may override a resolved edge without adding a new public recipe:

tsx

<Section
  style={{
    "--brick-section-start-spacing": "clamp(5rem, 9vw, 10rem)",
  }}
>
  ...
</Section>

This escape hatch does not make arbitrary values part of the React API.

Tokens and CSS hooks

Stable hooks are .brick-section, data-slot, [data-slot="section"], data-spacing, data-start-spacing, data-end-spacing, and their -sm|-md|-lg|-xl responsive forms.

Public variables:

--brick-section-space-none
--brick-section-space-sm
--brick-section-space-md
--brick-section-space-lg
--brick-section-space-xl
--brick-section-space-2xl
--brick-section-spacing
--brick-section-start-spacing
--brick-section-end-spacing

Advanced reference

Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.

Maintainer resources

Tests, playground evidence, source notes, and release history remain available without crowding the plug-and-play guide.

Source docs Changelog Playground