Skip to content
LSD Framework
Components · sheet

Sheet. Mobile-first bottom panel.

A bottom-sheet specialisation of drawer: draggable handle, multi snap points, scrollable content. Five variants: basic, draggable-handle, scrollable-content, multi-snap-point, inline.

01 · base

.lsd-sheet

Tap a trigger to open. Backdrop or Escape closes.

basic

Basic sheet

.lsd-sheet
02 · variants

Five variants

.lsd-sheet--basic

Basic

.lsd-sheet--basic
.lsd-sheet--draggable-handle

Draggable handle

Drag the bar at top to resize. Drag down past threshold to dismiss.

.lsd-sheet--draggable-handle
.lsd-sheet--scrollable-content

Scrollable content

.lsd-sheet--scrollable-content
.lsd-sheet--multi-snap-point

Multi snap point

Snaps to 30% / 60% / 90% of viewport on drag-release.

.lsd-sheet--multi-snap-point
.lsd-sheet--inline

Inline (non-modal)

Renders in-flow as a card — no dialog, always visible.

Inline sheet

Lives in flow — no backdrop, no Escape behaviour.

.lsd-sheet--inline
03 · animations

Entrance

.lsd-fx--slide-up

Slide-up

.lsd-fx--slide-up
.lsd-fx--blur-in

Blur-in

.lsd-fx--blur-in

Basic sheet

A simple bottom sheet.

Drag the handle

Drag the bar at top to grow or shrink. Drag down past 25% to dismiss.

Scrollable

Multi snap-point

Release to snap to the nearest of 30 / 60 / 90% of the viewport.

Slide-up entrance

Blur-in entrance
Components · LSD primitives
↩ Framework index