ObjectStackObjectStack

Page structure components — component reference

The page:* components that give a page its structure: header, footer, sidebar, sections, cards, tabs and accordions.

The page:* components give a page its structure. All of them except the header are containers for other components.

This page is generated from the repo-root sdui.manifest.json, the component manifest CI regenerates from the renderer registry. Regenerate it with node scripts/gen-sdui-reference.mjs; node scripts/gen-sdui-reference.mjs --check fails when it is stale.

page:accordion

Namespace page · a container: it takes child components.

InputTypeRequiredDescription
itemsarray of objectyesPanel definitions [{ label, icon?, collapsed?, children }] — collapsed: false opens a panel by default
allowMultipleboolean—
variantenum: flush, card—

page:card

Namespace page · a container: it takes child components.

InputTypeRequiredDescription
titlestring | objectAccepts an inline translation map ({ en, "zh-CN", … })
borderedboolean—
childrenslotCard content components, in order (the card body slot)
footerslot—

Namespace page · a container: it takes child components.

InputTypeRequiredDescription
childrenslotChild components rendered inside this container, in order

Namespace page.

InputTypeRequiredDescription
titlestring | objectSupports {field} interpolation and inline translation maps; falls back to the record title
subtitlestring | objectSame interpolation as Title
actionsarray of stringAction IDS — the names of actions declared on the object's own metadata — rendered in the header before any host-injected system actions. An id whose action declares neither record_header nor record_more in its locations renders nowhere.
recordChromebooleanSet false for the bare h1 header on non-record pages
showCopyIdboolean—
maxVisiblenumberHow many header actions render as inline buttons on desktop before the rest fold into the overflow menu. A positive integer — the contract rejects 0 and fractional values. Two kinds of action are routed to the overflow menu regardless of this budget and never occupy an inline slot: an action whose locations declare record_more without record_header, and any action with component action:menu. The host's own buttons (the record page's Edit) take no slot and never fold. The first inline action, or the one declaring variant primary, is the one filled primary button; the others are outline buttons. An action declaring variant danger is never the primary: inline it is a destructive button, and in the overflow menu it is a red row below a separator.
mobileMaxVisiblenumberThe same inline-button budget on mobile viewports, where horizontal room is scarce. A positive integer, defaulting to 1; the desktop half is Max Inline Actions, and the overflow routing rules stated there apply unchanged.

page:section

Namespace page · a container: it takes child components.

InputTypeRequiredDescription
childrenslotChild components rendered inside this container, in order

page:sidebar

Namespace page · a container: it takes child components.

InputTypeRequiredDescription
childrenslotChild components rendered inside this container, in order

page:tabs

Namespace page · a container: it takes child components.

InputTypeRequiredDescription
itemsarray of objectyesTab definitions [{ label, value?, icon?, count?, visibleWhen?, children }] — value is the stable ?tab= URL token, count auto-derives from record:related_list descendants when omitted
tabStyleenum: line, card, pill—
positionenum: top, left—
alwaysShowStripbooleanKeep the tab strip visible when only one tab survives. Default false: a lone pill is clutter rather than an affordance, so a one-tab strip is hidden and its panel renders bare. Count the tabs AFTER each item visibleWhen predicate has been evaluated — a page authored with four tabs of which three are conditional reaches this rule whenever the other three are false.

On this page