Panel
A bordered surface for one subject, with a head and a body.
<mm-panel heading="Needs attention" icon="notifications" count="3" link-href="/attention">
<mm-list>
<mm-list-item href="/pipelines/airflow_prod">
<mm-status-pill slot="start" state="failed"></mm-status-pill>
airflow_prod pipeline failed on its last run
<mm-text slot="end" variant="mono-dense" tone="tertiary">12 min ago</mm-text>
</mm-list-item>
</mm-list>
</mm-panel>
Guidance
Panels group one subject on a page, such as Needs attention, Pipelines or Activity on Home. A
panel is mm-surface with a 1px mm-rule border and radius-md, and no shadow: the step from
paper to surface is enough. The head has an optional 16px mm-text-3 icon, a 13px/650 title in a
real heading (text face, never display), an optional count and one right-aligned "View all" link
in ink, underlined on hover and focus.
The body is usually an mm-list or a table, edge to edge (padding="none", the default). Use
padding="default" for prose or a form. Never put cards or other panels inside a panel: separate
its parts with hairlines or spacing. Nesting one panel in another warns in the console.
loading shows skeleton lines (after 200ms, for at least 400ms) and marks the body busy. empty
swaps the body for the empty slot, usually a compact mm-empty-state.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
heading | heading | string | '' | The title, rendered in a real heading. |
level | level | number | 2 | Outline level of the title, 1 to 6. |
icon | icon | string | '' | Leading Material Symbols icon for the head. |
count | count | number | undefined | A count shown after the title, such as the number of items needing attention. | |
linkHref | link-href | string | '' | Href of the head link. |
linkLabel | link-label | string | '' | Text of the head link. Defaults to "View all". |
padding | padding | 'none' | 'default' | 'none' | none (default, for lists and tables) or default (space-4 by space-5). |
loading | loading | boolean | false | Shows skeleton lines in the body and marks it busy. |
empty | empty | boolean | false | Shows the empty slot instead of the body. |
Slots
| Slot | Description |
|---|---|
| Default | The body: an mm-list, a table or content. |
heading | The title, if it needs markup. Otherwise use heading. |
link | One link at the end of the head, if link-href is not enough. |
actions | Small buttons in the head, before the link. |
empty | Shown instead of the body when empty is set. |
footer | A footer under a hairline. |
CSS parts
| Part | Description |
|---|---|
panel | The outer box. |
head | The head row. |
icon | The head icon. |
heading | The mm-heading. |
count | The count. |
link | The built-in "View all" link. |
body | The body. |
footer | The footer. |
Examples
Every state of mm-panel in Storybook, with keyboard and screen reader tests.