Panel
Material Design 3-styled panel web component (lit-material-panel) — a bordered/raised content container with optional header and footer.
- 1.0 KB gzipped
- @lit-material/panel 0.0.3
- Renders on the server
Example
Panel
A generic content container with optional header and footer bands.
Filters
Panel content goes here.
Markup
<lit-material-panel variant="default">
<h2 slot="header">Filters</h2>
<p>Panel content goes here.</p>
<div slot="footer">
<lit-material-button variant="text">Apply</lit-material-button>
</div>
</lit-material-panel>
Install
npm install @lit-material/panel @lit-material/tokensimport "@lit-material/panel";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-panel>
A generic content container with optional header and footer bands — for
grouping related content (a filter form, a summary card, a settings
section) distinctly from the page background, without the interactive
affordances (hover/press states, href) that lit-material-card implies.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
variant | variant | PanelVariant | "default" | |
scrollable | scrollable | boolean | false | Scrolls the body internally instead of growing, once the panel's own height is constrained. |
Slots
| Slot | Description |
|---|---|
header | Optional heading content. |
| default | The panel's main content. |
footer | Optional footer content (actions, metadata). |
CSS parts
| Part | Description |
|---|---|
header | The header band. |
body | The main content band. |
footer | The footer band. |