Components · drawer
Drawer. Slide-in from any edge.
Modal slide-in panel built on native <dialog>. Six placement variants (right / left / top / bottom / responsive / persistent) and three sizes (sm / md / lg).
01 · base
.lsd-drawer
All three sizes — right edge.
sizes
sm / md / lg
.lsd-drawer--sm / --md / --lg
02 · variants
Six placements
.lsd-drawer--right
Right (default)
.lsd-drawer--right
.lsd-drawer--left
Left
.lsd-drawer--left
.lsd-drawer--top
Top
.lsd-drawer--top
.lsd-drawer--bottom
Bottom
.lsd-drawer--bottom
.lsd-drawer--responsive
Responsive
Right on desktop, bottom on mobile. Resize to test.
.lsd-drawer--responsive
.lsd-drawer--persistent
Persistent
No backdrop — page stays interactive.
.lsd-drawer--persistent
03 · animations
Panel entrance
.lsd-fx--slide-left
Slide-left (right drawer)
.lsd-fx--slide-left
.lsd-fx--fade-in
Fade-in
.lsd-fx--fade-in
Components · LSD primitives