A workspace is the whole page

.workspace fills the window height (100dvh). Use it instead of the app shell (the app sidebar) for a single task, such as editing a theme. Its children are a <header> top bar (back button, <h1> task name, controls, and the primary button last), an <aside> side panel and a <main> work area. On this docs page the example box has a capped height. See the real thing: Open full page

Summer theme

The work area

<div class="workspace">
  <header>
    <button type="button" class="btn" data-variant="ghost" data-size="icon" popovertarget="ws-panel" aria-label="Open the panel">
      <i class="icon icon-panel-left" aria-hidden="true"></i>
    </button>
    <a href="#" class="btn" data-size="icon" aria-label="Back to themes">
      <i class="icon icon-arrow-left" aria-hidden="true"></i>
    </a>
    <h1>Summer theme</h1>
    <button type="button" class="btn" data-size="sm">Preview</button>
    <button type="button" class="btn" data-variant="primary" data-size="sm">Save</button>
  </header>
  <aside id="ws-panel" popover aria-label="Sections">
    <nav class="subnav" aria-label="Sections">
      <a href="#" aria-current="page">Typography</a>
      <a href="#">Navigation</a>
      <a href="#">Homepage</a>
      <a href="#">Footer</a>
    </nav>
  </aside>
  <main>
    <p>The work area</p>
  </main>
</div>

A wide panel

The side panel is 20rem wide by default. data-panel="wide" makes it 24rem, for panels with forms or long lists.

Summer theme

The work area

<div class="workspace" data-panel="wide">
  <header>
    <button type="button" class="btn" data-variant="ghost" data-size="icon" popovertarget="ws-wide-panel" aria-label="Open the panel">
      <i class="icon icon-panel-left" aria-hidden="true"></i>
    </button>
    <h1>Summer theme</h1>
    <button type="button" class="btn" data-variant="primary" data-size="sm">Save</button>
  </header>
  <aside id="ws-wide-panel" popover aria-label="Settings">
    <p>A panel 24rem wide</p>
  </aside>
  <main>
    <p>The work area</p>
  </main>
</div>

An aside after the main is the end panel

An <aside> after the <main> is the end panel. It is as wide as the start panel, with its border on the other side. A workspace can have a start panel, an end panel or both, such as a page list on the left and a chat on the right.

Summer campaign

The work area

<div class="workspace">
  <header>
    <button type="button" class="btn" data-variant="ghost" data-size="icon" popovertarget="ws-end-start" aria-label="Open the pages">
      <i class="icon icon-panel-left" aria-hidden="true"></i>
    </button>
    <h1>Summer campaign</h1>
    <button type="button" class="btn" data-variant="ghost" data-size="icon" popovertarget="ws-end-end" aria-label="Open the chat">
      <i class="icon icon-panel-right" aria-hidden="true"></i>
    </button>
  </header>
  <aside id="ws-end-start" popover aria-label="Pages">
    <p>The start panel</p>
  </aside>
  <main>
    <p>The work area</p>
  </main>
  <aside id="ws-end-end" popover aria-label="Chat">
    <p>The end panel</p>
  </aside>
</div>

Only an end panel

The start panel is optional: a <main> followed by an <aside>, such as order details with a customer panel on the right.

Order #1042

3 items, total $148.00

<div class="workspace">
  <header>
    <h1>Order #1042</h1>
    <button type="button" class="btn" data-variant="ghost" data-size="icon" popovertarget="ws-only-end" aria-label="Open the customer">
      <i class="icon icon-panel-right" aria-hidden="true"></i>
    </button>
  </header>
  <main>
    <p>3 items, total $148.00</p>
  </main>
  <aside id="ws-only-end" popover aria-label="Customer">
    <p>Emma Wilson · emma.wilson@example.com</p>
  </aside>
</div>

Below 768px a button in the bar opens the panel

Give the side panel popover and an id. A button in the top bar whose popovertarget points to that id opens the panel over the work area. Press Esc or click outside to close it. The end panel opens from the right edge. From 768px up, panels are normal columns and the popovertarget buttons in the top bar hide themselves. No JS needed. Try narrowing the window on the examples above or on the full page.

Attributes

Attribute / element	Values	Description
`.workspace`		Full-window layout (`100dvh`). Use it as a direct child of `body`
`data-panel`	`wide`; none = 20rem (default)	Makes the side panel 24rem wide
`> header`		Full-width top bar that lays out its children in a row
`header > h1`		Task name. Pushes the buttons after it to the right. Truncated with … when too long
`header [popovertarget]`	The panel's id	Opens the panel on narrow screens. Hidden from 768px
`> aside` (before `main`)		Start panel with a border on the right. Scrolls on its own
`> main`		Work area. Scrolls on its own
`> main ~ aside`		End panel with a border on the left. Opens from the right edge on narrow screens
`aside[popover]`, `id`		Below 768px the panel is hidden and opens as a popover over the work area (with a backdrop). From 768px it is a column. Add an `aria-label` to name the panel