Side sheet

The side sheet (.side-sheet) is a panel that slides in from the left or right edge of the viewport — used for detail views, secondary navigation, or filters on wider screens. It supports two layout modes that must always be declared explicitly: .side-sheet-modal overlays the page with a scrim like a drawer, while .side-sheet-standard keeps the panel in normal document flow alongside the page content.

<button type="button" class="btn toggle-target" aria-controls="side-sheet-demo">
  <span class="btn-label">Details</span>
</button>

<div class="side-sheet side-sheet-modal side-sheet-end is-closed" id="side-sheet-demo">
  <div class="side-sheet-scrim action-close"></div>
  <div class="side-sheet-panel" role="dialog" aria-labelledby="side-sheet-demo-title">
    <div class="side-sheet-header">
      <span class="side-sheet-title" id="side-sheet-demo-title">Details</span>
      <button type="button" class="side-sheet-close action-close" aria-label="Close">×</button>
    </div>
    <div class="side-sheet-content">Detail content.</div>
  </div>
</div>