Section
A titled band of content with the spacing and hierarchy a page needs.
@luc/ui/layoutExamples
A titled band
The heading rhythm a page repeats: the section owns the space between its title, its description and its content, and the page owns the space *between* sections.
Position sizing
Half the risk, twice the breadth.
Content
<Section title="Position sizing" description="Half the risk, twice the breadth.">
<Text variant="body">…</Text>
</Section>With actions
The action slot sits opposite the title and aligns with it, so a section header reads as one row instead of a heading with a button floating beside it.
Constituents
Sixty-one instruments, quarterly rebalance.
Return
Volatility
Sharpe
<Section
title="Constituents"
description="Sixty-one instruments, quarterly rebalance."
actions={<Button size="sm" variant="outline">Export</Button>}
>
<Grid columns={3} gap="md">…</Grid>
</Section>Spacing modes
`gap` is the distance between the header and the content — tighter where a section holds a form, looser where it holds a chart.
Universe
Which instruments are in scope.
US large cap
Universe
Which instruments are in scope.
US large cap
Universe
Which instruments are in scope.
US large cap
<Section title="Universe" description="Which instruments are in scope." gap="sm">…</Section>
<Section title="Universe" description="Which instruments are in scope." gap="md">…</Section>
<Section title="Universe" description="Which instruments are in scope." gap="lg">…</Section>A page of sections
The realistic composition: one column, three sections, each with a different density of content — a grid, a panel and a header with an action.
Overview
Four measurements, one lookback.
Return
Volatility
Sharpe
Drawdown
Data
Daily bars, adjusted for splits.
Source
luc_quant.market_candles_1d
Schedule
Monthly rebalance, nightly refresh.
Monthly
02:00 UTC
<Stack gap="xl">
<Section title="Overview" description="Four measurements, one lookback.">…</Section>
<Section title="Data" description="Daily bars, adjusted for splits.">…</Section>
<Section title="Schedule" actions={<Button size="sm">Edit</Button>}>…</Section>
</Stack>Usage
import { Section } from "@luc/ui/layout";<Section title="Overview" description="Four measurements, one lookback.">
…
</Section>The title, the description and the `actions` slot are one header row; the section owns the space between that row and its content.
Package setup — peer requirements, the stylesheet and the provider — is on installation.
API
Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.
| Export | Kind | Signature |
|---|---|---|
Section | 4 documented props | ({ className, title, description, actions, gap, children, ...props }: SectionProps) => import("@types/react").JSX.Element |
Section props
Type: SectionProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
actions? | ReactNode | — | |
description? | ReactNode | — | |
gap? | "sm" | "md" | "lg" | undefined | — | Vertical space between the header and the content. |
title? | ReactNode | — |
Guidelines
Do
- Use `Section` where a band of a page needs a title and a description: owning that rhythm is what makes a long page scannable.
- Let the page space the sections (`Stack gap="xl"`) and let each section space its own contents.
- Put the one thing a reader can do to this band in `actions`, so the header reads as a single row rather than a heading with a button beside it.
Don't
- Do not use `Section` as a surface: it draws no background and no border — a `Card` or a `Panel` is the surface.
- Do not give a section the page's `h1`; the section's own title is already the right level in the outline.
- Do not repeat the page title in a section title: a band called Overview inside a page called Overview costs a line and says nothing.
Accessibility
The component renders a real `<section>` containing an `<h2>`, and that heading is what names the region in a screen reader's outline — a `<section>` with no heading is announced as an unnamed region, which is worse than a plain `div`. The description is a paragraph associated by position rather than by ARIA, so it stays readable copy instead of becoming a second label.
Family
Layout
Space, rhythm and the surfaces a page is made of.
10 documented entries in this family. Open the family index
Related