Drawer

A panel that slides in from the edge of the screen.

Edit Profile

Update your display name, avatar, and notification preferences from this panel.

<div class="drw-panel">
  <div class="drw-header">
    <div class="drw-title">Edit Profile</div>
    <button class="drw-close"><span class="material-icons-round">close</span></button>
  </div>
  <div class="drw-body">Content here</div>
  <div class="drw-footer">
    <button class="drw-btn cancel">Cancel</button>
    <button class="drw-btn confirm">Save</button>
  </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
`drw-panel`	Slide-in panel (position:absolute, right:0)
`drw-backdrop`	Semi-transparent overlay
`drw-header`	Title + close button row
`drw-body`	Flexible content area
`drw-footer`	Action buttons row
`drw-dk`	Dark mode modifier

← Previous Divider Next → Dropdown