Back to Components

Layout

Section

Semantic <section> with optional display-font title and muted subtitle. The page-region wrapper.

Examples

With title and subtitle

Recently added

Books imported in the last 7 days

Body content sits below the heading block.

<Section title="Recently added" subtitle="Books imported in the last 7 days">
  <p>Body content sits below the heading block.</p>
</Section>

level="3"

Sub-heading

Renders an h3 instead of h2.

<Section title="Sub-heading" level={3}>…</Section>

Props

PropTypeDefaultDescription
titlestringHeading text rendered with the display font.
subtitlestringMuted subtitle below the heading.
level2 | 3 | 42Heading element depth (h2 / h3 / h4).

Install

CLI

npx @a3tai/mittsu add section