Section
A titled page region with optional description and actions.
<mm-section heading="Run history" description="Every run of postgres-shop in the last 30 days.">
<mm-button slot="actions" size="sm" icon="play-arrow">Run now</mm-button>
…
</mm-section>
Guidance
A section is one major region of a page: Schema, Run history, Members. It is structure felt
rather than seen: a heading, an optional sentence of description and actions at the end of the
heading row, then the content. Sections are spaced space-12 apart; divider adds a hairline
above when spacing alone is not enough. Sections are never boxed; use mm-panel for a bounded
subject on a dashboard.
The heading is the 20px heading style in the text face. Section headings never use the display
face, which is kept for the page title.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
heading | heading | string | '' | The heading text. |
level | level | number | 2 | Outline level of the heading, 1 to 6. |
description | description | string | '' | One sentence under the heading. |
divider | divider | boolean | false | Draws a hairline above the section. |
Slots
| Slot | Description |
|---|---|
| Default | The content. |
heading | The heading, if it needs markup. Otherwise use heading. |
description | A description with markup. Otherwise use description. |
actions | Buttons at the end of the heading row; at most one primary. |
CSS parts
| Part | Description |
|---|---|
section | The section element. |
head | The heading row. |
heading | The mm-heading. |
description | The description. |
actions | The actions wrapper. |
body | The content wrapper. |
Examples
Every state of mm-section in Storybook, with keyboard and screen reader tests.