Skip to content
LSD Framework
Components · popovers

Popovers. Click, dismiss, contain.

A bigger sibling to .lsd-tooltip. Click a trigger, get a panel that can hold menus, cards, forms, or info. Click-outside or Escape closes.

01 · base

.lsd-popover

Click any trigger — panel toggles via data-open. Click outside or press Escape to close. Only one popover open at a time.

base

Trigger + panel

Click button → panel opens. Click outside or Escape closes it.

Hi! I'm the panel.
<span class="lsd-popover">
  <button>Open</button>
  <div class="lsd-popover__panel">...</div>
</span>
states

Two popovers — only one open

Click one, then the other — JS auto-closes the first.

First panel
Second panel
 
<span class="lsd-popover">...</span>
02 · variants

Four variants

.lsd-popover--menu

Option menu

List of clickable actions — common for kebab menus.

.lsd-popover--menu
.lsd-popover--card

Rich card

Full-card layout — image header + body.

Aurora Studio

Keyframe timeline editor for paced motion.

.lsd-popover--card
.lsd-popover--form

Mini form

Inline form — quick-add or filter input.

.lsd-popover--form
.lsd-popover--info

Info pop

Title + body description — like a richer tooltip.

About this metric

Active users in the last 7 days, deduplicated by device hash.

.lsd-popover--info
03 · animations

Entrance chaining

.lsd-fx--scale-in

Scale-in

Springs from origin.

Hi!
.lsd-fx--scale-in
.lsd-fx--slide-down

Slide-down

Drops into place.

Dropped
.lsd-fx--slide-down
.lsd-fx--blur-in

Blur-in

Focus pull entrance.

Focused
.lsd-fx--blur-in
Components · LSD primitives
↩ Framework index