Sheet

A panel that slides up from the bottom of the screen.

Quick Settings

Sheets slide up from the bottom of the screen. They are useful for mobile-friendly actions and settings panels.

<div class="sh-panel">
  <div class="sh-handle-bar"></div>
  <div class="sh-header">
    <div class="sh-title">Title</div>
    <button class="sh-close"><span class="material-icons-round">close</span></button>
  </div>
  <div class="sh-body">Content here.</div>
</div>

Installation

Built with pure HTML and CSS. Include ds-shared.css in your project.

pnpm add @norbielink/ds

API Reference

Classes

Class	Description
`sh-panel`	Bottom sheet panel
`sh-handle-bar`	Drag indicator pill at top
`sh-backdrop`	Overlay behind the sheet
`sh-header`	Title + close button row
`sh-dk`	Dark mode modifier

← Previous Select Next → Skeleton