Layout Components
Layout components organize reading flow without collecting user input.
Callout
Use Callout for notes, warnings, tips, and important context.
Prop⇅
Type⇅
Notes⇅
id
string
Stable component ID.
label
string
Heading shown inside the callout.
type
string
Visual tone such as info, success, or warning.
visibleWhen
expression
Optional conditional visibility.
Authoring tip
Keep a callout short and attach it to the paragraph it clarifies.
<Callout id="layout-callout" type="info" label="Authoring tip">
Keep a callout short and attach it to the paragraph it clarifies.
</Callout>
Accordion
Use Accordion when a page needs optional detail without overwhelming the main path.
Prop⇅
Type⇅
Notes⇅
id
string
Stable group ID.
visibleWhen
expression
Optional conditional visibility.
Accordion.Item.id
string
Stable item ID.
Accordion.Item.label
string
Item title.
When should I use this?
What should stay outside?
<Accordion id="layout-accordion">
<Accordion.Item id="layout-accordion-item-one" label="When should I use this?">
Use it for reference detail, examples, or troubleshooting notes.
</Accordion.Item>
<Accordion.Item id="layout-accordion-item-two" label="What should stay outside?">
Put required instructions in the normal page flow, not behind a collapsed item.
</Accordion.Item>
</Accordion>
Tabs
Use Tabs for parallel versions of the same information.
Prop⇅
Type⇅
Notes⇅
id
string
Stable group ID.
Tabs.Item.id
string
Stable tab ID.
Tabs.Item.label
string
Tab label.
visibleWhen
expression
Optional conditional visibility on the group or item.
Reader
Author
Readers see one focused branch at a time.
<Tabs id="layout-tabs">
<Tabs.Item id="layout-tabs-reader" label="Reader">
Readers see one focused branch at a time.
</Tabs.Item>
<Tabs.Item id="layout-tabs-author" label="Author">
Authors can keep related variants next to each other.
</Tabs.Item>
</Tabs>
Columns and Row
Use Columns for balanced blocks and Row for horizontal item groups.
Prop⇅
Type⇅
Notes⇅
id
string
Stable group ID.
columns
number
Preferred number of columns.
gap
string
Space between items.
minWidth
number
Minimum column width.
itemWidth
number
Row item width.
Plan
Decide what the reader should do next.
Build
Add the smallest component that supports that action.
OneDraft
TwoTest
ThreePublish
<Columns id="layout-columns" columns={2} gap="medium" minWidth={220}>
<Columns.Item id="layout-columns-left" label="Plan">
Decide what the reader should do next.
</Columns.Item>
<Columns.Item id="layout-columns-right" label="Build">
Add the smallest component that supports that action.
</Columns.Item>
</Columns>
<Row id="layout-row" gap="small" itemWidth={220}>
<Row.Item id="layout-row-one" label="One">Draft</Row.Item>
<Row.Item id="layout-row-two" label="Two">Test</Row.Item>
<Row.Item id="layout-row-three" label="Three">Publish</Row.Item>
</Row>
Dialog
Use Dialog for secondary detail that should open on demand.
Prop⇅
Type⇅
Notes⇅
id
string
Stable component ID.
label
string
Button or title text.
visibleWhen
expression
Optional conditional visibility.
<Dialog id="layout-dialog" label="Open checklist">
Use dialogs for optional details, not required reading.
</Dialog>
Carousel
Use Carousel for ordered visual or conceptual slides.
Prop⇅
Type⇅
Notes⇅
id
string
Stable group ID.
Carousel.Item.id
string
Stable slide ID.
Carousel.Item.label
string
Slide label.
<Carousel id="layout-carousel">
<Carousel.Item id="layout-carousel-one" label="First">
Introduce the concept.
</Carousel.Item>
<Carousel.Item id="layout-carousel-two" label="Second">
Show the example.
</Carousel.Item>
</Carousel>