Panel

A panel is a column of chrome standing on the paper: a header pinned to its top, a body that scrolls on its own, and a footer pinned to its bottom. An application’s list beside its detail, an inspector, a drawer’s contents are panels.

Design examples

The header and footer stay in place while metadata fills the body.

<section class="specimen">
<ds-panel><ds-row class="line" slot="header"><ds-text literal strong>Photograph details</ds-text></ds-row><ds-row class="line" ><ds-text literal class="grow">Reference</ds-text><ds-text literal class="mono" tone="muted">NW-024</ds-text></ds-row><ds-row class="line" ><ds-text literal class="grow">Edition</ds-text><ds-text literal class="mono" tone="muted">024 / 100</ds-text></ds-row><ds-row class="line" ><ds-text literal class="grow">Width</ds-text><ds-text literal class="mono" tone="muted">240 mm</ds-text></ds-row><ds-row class="line" ><ds-text literal class="grow">Height</ds-text><ds-text literal class="mono" tone="muted">300 mm</ds-text></ds-row><ds-row class="line" ><ds-text literal class="grow">Paper</ds-text><ds-text literal class="mono" tone="muted">Cotton</ds-text></ds-row><ds-row class="line" ><ds-text literal class="grow">Year</ds-text><ds-text literal class="mono" tone="muted">2026</ds-text></ds-row><ds-row class="line" slot="footer"><ds-button secondary>Close</ds-button><ds-button primary>Apply</ds-button></ds-row></ds-panel>
</section>
<style>
.specimen { width: 100%; min-width: 0; --cell: calc(20px * var(--sf, 1)); }
.specimen .line { width: 100%; }
.specimen .grow { flex: 1; min-width: 0; }
.specimen .muted { color: var(--ds-text-color-muted); }
.specimen .mono { --ds-typeface-regular: var(--ds-typeface-mono); font-variant-numeric: tabular-nums; }
.specimen .value { width: calc(4 * var(--cell)); text-align: right; }
.specimen .mark { display: inline-flex; align-items: flex-end; width: var(--cell); height: var(--ds-control-height); flex: 0 0 var(--cell); }
.specimen .columns { display: flex; flex-wrap: wrap; gap: var(--cell); }
.specimen .columns > * { min-width: 0; }
.specimen fieldset { border: 0; padding: 0; margin: 0; }
.specimen legend { padding: 0; }
.specimen label { display: flex; align-items: flex-end; gap: calc(var(--cell) / 2); min-height: var(--cell); }
.specimen ds-panel { height: calc(10 * var(--cell)); }
</style>

A stable title and action frame a short queue.

<section class="specimen">
<ds-panel><ds-row class="line" slot="header"><ds-text literal strong>Ready for review</ds-text></ds-row><ds-list><ds-row class="line" ><span class="mark"><ds-icon type="page" size="large" aria-hidden="true"></ds-icon></span><ds-text literal >Cover proof</ds-text></ds-row><ds-row class="line" ><span class="mark"><ds-icon type="page" size="large" aria-hidden="true"></ds-icon></span><ds-text literal >Wall labels</ds-text></ds-row><ds-row class="line" ><span class="mark"><ds-icon type="page" size="large" aria-hidden="true"></ds-icon></span><ds-text literal >Visitor guide</ds-text></ds-row></ds-list><ds-row class="line" slot="footer"><ds-text literal class="grow" tone="muted">3 documents</ds-text><ds-button primary>Review</ds-button></ds-row></ds-panel>
</section>
<style>
.specimen { width: 100%; min-width: 0; --cell: calc(20px * var(--sf, 1)); }
.specimen .line { width: 100%; }
.specimen .grow { flex: 1; min-width: 0; }
.specimen .muted { color: var(--ds-text-color-muted); }
.specimen .mono { --ds-typeface-regular: var(--ds-typeface-mono); font-variant-numeric: tabular-nums; }
.specimen .value { width: calc(4 * var(--cell)); text-align: right; }
.specimen .mark { display: inline-flex; align-items: flex-end; width: var(--cell); height: var(--ds-control-height); flex: 0 0 var(--cell); }
.specimen .columns { display: flex; flex-wrap: wrap; gap: var(--cell); }
.specimen .columns > * { min-width: 0; }
.specimen fieldset { border: 0; padding: 0; margin: 0; }
.specimen legend { padding: 0; }
.specimen label { display: flex; align-items: flex-end; gap: calc(var(--cell) / 2); min-height: var(--cell); }
.specimen ds-panel { height: calc(10 * var(--cell)); }
</style>

Use it

<ds-panel>
  <ds-row slot="header" fill>
    <ds-text literal strong>Projects</ds-text>
    <ds-button primary>New</ds-button>
  </ds-row>
  <ds-list>…</ds-list>
  <ds-row slot="footer"><ds-text tone="muted" literal>12 projects</ds-text></ds-row>
</ds-panel>

Content goes to the default slot; slot="header" and slot="footer" pin to the top and bottom. Give the panel its height from the page’s layout (a page’s columns, fill) and only the body scrolls. Rows inside it are one square high as everywhere; the panel adds no box or shadow of its own.

Slot	What it holds
`header`	A row at the top: the panel’s title and its actions.
Default	The body, which scrolls.
`footer`	A row at the bottom: a count, closing actions.

Part	What it is
`header`, `body`, `footer`	The three areas, for a product’s own styles.

Select panel in Sync 1’s components export.

Page · Row · List