Grouped content with optional title, subtitle, header actions, and a surface variant.
Examples
Open in storybook
Properties
Property
Attribute
Description
Type name
Type
Default
variant
variant
Surface look: `default` (flush), `raised`, or `outline`.
DuoSectionVariant
"default" | "raised" | "outline"
"default"
titleSize
title-size
Title typography: `small`, `medium`, or `large` (default `large`).
DuoSectionTitleSize
"small" | "medium" | "large"
"large"
title
title
Section heading when the `title` slot is empty.
string
string
""
subtitle
subtitle
Secondary line under the title.
string
string
""
Slots
Name
Description
title
Custom title markup (overrides the `title` attribute).
subtitle
Custom subtitle markup (overrides the `subtitle` attribute).
actions
Header toolbar (e.g. `<duo-button>`).
header
Full header region (overrides built-in title / subtitle / `actions`).
default
Body content.
Usage
Section groups related content with an optional title, subtitle, header action, and body. Use variant to set visual hierarchy relative to surrounding content.
Variants
Variant
Look
Use when
default
No background, border, or extra padding
The block is the primary content of a page, view, or modal
raised
Raised surface and padding
Secondary content should separate from the primary area, or a set of peer sections needs distinct surfaces
outline
Border and padding, no raised fill
Secondary content needs a boundary without the emphasis of a raised surface
When there is a clear primary content area, use default for that area. Secondary sections can use raised or outline. When the page is a collection of equal items, use raised, outline, or both — not default on individual items.
Title size
Use title-size for heading typography. Default is large, matching Listtitle-size="large".
Value
Typography
large
Extra-large heading (--duo-font-xl)
medium
Large heading (--duo-font-l)
small
Medium heading (--duo-font-m)
Do
Set title and subtitle (or their slots) when the block needs a visible heading.
Use title-size="small", medium, or large to match hierarchy around other headings.
Place header controls in the actions slot (for example a ghost Button).
Use body-only sections for chips, summary rows, or other grouped content.
Don’t
Don’t use Section for elevated cards with media or footer actions — use Card.
Don’t use it for page-level layout — prefer Stack or Box.
Don’t rely on Section for blocking dialogs — use Modal.