# Section (/docs/components/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.
>
> startupbuilder.dev, [Component](https://startupbuilder.dev/business/nouns/component)

A section is one entry of a Page's `sections`: `{ kind, shell, block }`. The `block` is one [Section type](https://next.mdxui.dev/docs/sections), 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`](https://next.mdxui.dev/docs/sections/nav) |
| `bar` | [`nav`](https://next.mdxui.dev/docs/sections/nav) |
| `hero` | [`hero`](https://next.mdxui.dev/docs/sections/hero) |
| `band` | [`stats`](https://next.mdxui.dev/docs/sections/stats), [`statement`](https://next.mdxui.dev/docs/sections/statement), [`command-row`](https://next.mdxui.dev/docs/sections/command-row) |
| `section` | [`steps`](https://next.mdxui.dev/docs/sections/steps), [`compare`](https://next.mdxui.dev/docs/sections/compare), [`product-list`](https://next.mdxui.dev/docs/sections/product-list), [`feature-split`](https://next.mdxui.dev/docs/sections/feature-split), [`feature-grid`](https://next.mdxui.dev/docs/sections/feature-grid), [`bento`](https://next.mdxui.dev/docs/sections/bento), [`facts`](https://next.mdxui.dev/docs/sections/facts), [`faq`](https://next.mdxui.dev/docs/sections/faq), [`terminal`](https://next.mdxui.dev/docs/sections/terminal), [`api-call`](https://next.mdxui.dev/docs/sections/api-call), [`endpoints`](https://next.mdxui.dev/docs/sections/endpoints), [`text-stack`](https://next.mdxui.dev/docs/sections/text-stack), [`agent-prompt`](https://next.mdxui.dev/docs/sections/agent-prompt), [`post-list`](https://next.mdxui.dev/docs/sections/post-list), [`page-head`](https://next.mdxui.dev/docs/sections/page-head), [`cta-form`](https://next.mdxui.dev/docs/sections/cta-form), [`pricing`](https://next.mdxui.dev/docs/sections/pricing), [`plan-table`](https://next.mdxui.dev/docs/sections/plan-table), [`product-head`](https://next.mdxui.dev/docs/sections/product-head) |
| `article` | [`article`](https://next.mdxui.dev/docs/sections/article) |
| `closing` | [`closing`](https://next.mdxui.dev/docs/sections/closing) |
| `footer` | [`footer`](https://next.mdxui.dev/docs/sections/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

  - **name** (alpha): `block.type`, one of 27 Section types; `Pricing` is drawn by `pricing`
  - **props** (alpha): The `block` fields: every string bounded, every list counted
  - **region: header** (alpha): `kind: nav`, the bar a page opens with
  - **region: section** (alpha): `kind`: `hero`, `band`, `section`, `article` or `closing`
  - **region: footer** (alpha): `kind: footer`, the last section of every page
  - **region: notice** (gap): No notice Section type. `kind: bar` opens a page in place of `nav`, and no worked Site uses it
  - **interactive** (alpha): No script beyond copy buttons: `faq` opens with `details`, `terminal` switches with radio inputs
  - **filled from records** (gap): Literal props, written by the agent from the records

## 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`](https://next.mdxui.dev/docs/reference/refusals#bento.panels). 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.

## Related

  - [Section types](https://next.mdxui.dev/docs/sections): All 27, each rendered in five Themes.
  - [Page](https://next.mdxui.dev/docs/components/page): Three to twenty sections, in order.
  - [The catalog, mapped](https://next.mdxui.dev/docs/components): startupbuilder.dev's UI catalog against the Section types.