Skip to content
LSD Framework
Component · signal

Alerts

A message that wants your attention without raising its voice. Role-driven tones, dismissible with a smooth collapse, banner and inline variants, optional CTA wiring.

01 · Four roles · info / success / warn / error--alert-tone

New surface tier available

A high-tier override just landed in your Cosmos. Wire it from the Surfaces panel to expose --role--elevated.

Build saved to constellation

Aurora keyframes synced. All 4 sequences validated against the active brand package.

02 · Inline · compact one-row.lsd-alert--inline
Two unsaved changes on this template.
Synced 9 seconds ago.
03 · Banner · full-width strip.lsd-alert--banner
04 · With CTA actions.lsd-alert__cta

A brand package is waiting to be applied

The package house-of-aurora includes 24 tokens, 6 surfaces, and 3 motion presets. Apply now or stash for later.

05 · Dismissible · smooth collapsedata-dismiss

Drag-snap calibrated

Token-snap scale now resolves at --spacing--3xl. Click the × to collapse this — and see the height animate to zero.

Connector handshake refused

The remote service returned 403. Re-issue credentials from the API spine and retry.

06 · Sticky · pins on scroll.lsd-alert--sticky

Scroll the page — the strip below stays anchored under the topbar until dismissed.

Trial window closes in 6 days

Convert before the orbit decays to keep your custom surfaces and behaviour wires.

View HTML — minimal markup
<div class="lsd-alert lsd-alert--warn" role="alert">
  <span class="lsd-alert__icon"></span>
  <div class="lsd-alert__body">
    <p class="lsd-alert__title">Heading</p>
    <p class="lsd-alert__text">Body copy</p>
    <div class="lsd-alert__actions">
      <button class="lsd-alert__cta">Primary</button>
    </div>
  </div>
  <button class="lsd-alert__close" data-dismiss>&times;</button>
</div>