Section
A section is a kind, a shell and one Section type: the kind places it among its neighbors, and the shell paints behind it.
A Component is a named block of a Page, such as a hero, a pricing table, or a form, filled from records through typed props.Component startupbuilder.dev
A section is one entry of a Page's sections: { kind, shell, block }. The block is one Section type, the mdxui drawing of a Component.
What mdxui renders
The same feature-grid record on the four surface values of its shell. The record does not change; only the paint behind it does.
The kind picks the section's landmark and the divider before it, so no record names an element.
kind | Wraps, on the living pages |
|---|---|
nav | nav |
bar | nav |
hero | hero |
band | stats, statement, command-row |
section | steps, compare, product-list, feature-split, feature-grid, bento, facts, faq, terminal, api-call, endpoints, text-stack, agent-prompt, post-list, page-head, cta-form, pricing, plan-table, product-head |
article | article |
closing | closing |
footer | footer |
| Shell field | Values | Required |
|---|---|---|
id | string, pattern ^[a-z][a-z0-9-]{0,23}$ | no |
inset | "contained" | "bleed" | "article" | "listing" | yes |
density | "none" | "section" | "compact" | "hero" | "closing" | "footer" | "access" | "article" | "listing" | yes |
surface | "paper" | "tint" | "plate" | "glass" | no |
background | "none" | "dots" | "grain" | "glow" | no |
sticky | boolean | no |
aside | boolean | no |
A Section type never paints itself: the shell carries the surface, the background, the inset and the density. A sticky bar names its surface, so it stays opaque.
How it maps
| startupbuilder.dev | mdxui today | Status |
|---|---|---|
name | block.type, one of 27 Section types; Pricing is drawn by pricing | Alpha: Renders today from the published packages |
props | The block fields: every string bounded, every list counted | Alpha: Renders today from the published packages |
region: header | navkind: nav, the bar a page opens with | Alpha: Renders today from the published packages |
region: section | kind: hero, band, section, article or closing | Alpha: Renders today from the published packages |
region: footer | footerkind: footer, the last section of every page | Alpha: Renders today from the published packages |
region: notice | No notice Section type. kind: bar opens a page in place of nav, and no worked Site uses it | Gap: No counterpart in the record; the intended Noun drafts one |
interactive | No script beyond copy buttons: faq opens with details, terminal switches with radio inputs | Alpha: Renders today from the published packages |
filled from records | Literal props, written by the agent from the records | Gap: No counterpart in the record; the intended Noun drafts one |
Sections inside a section
Four Section types hold others in their specimen field: hero, feature-split, steps and closing, one to three each. A bento panel holds exactly one terminal, agent-prompt or api-call. Nesting stays data: a slot holds records, never markup.
The section head
SectionHeadSchema is the head most Section types share: an eyebrow, an optional title and lede, a scale and a split layout. The eyebrow is required, and a head needs a title or a lede.
Status
Every field above parses and renders in @mdxui/site@7.0.0-alpha.0. The one gap is the binding: a section takes literal words, not a record to read them from.