Top strip
Single-line announcement bar. Below 560px the supporting text hides; the link CTA stays.
.banner-top-stripdata-banner-dismissible.lsd-fx--fade-inBlocks · Banners
Banner sections
Six attention-grabbing patterns — top strip, floating pill, contextual alert, cookie consent, modal overlay, and live status strip. Container-query responsive.
Promo pill
Floating glass pill anchored to the top center of its container. Collapses padding + radius under 480px.
.banner-promo-pill.lsd-chip--icon-leading.lsd-btn--smAlert inline
Four tonal variants — info, success, warning, danger. Stacks under 760px.
.banner-alert.lsd-chip--solid.is-info / .is-success / .is-warning / .is-dangerCookie consent
Bottom-anchored within container. Buttons stack full-width below 600px. Advanced toggle reveals preferences.
.banner-cookie.lsd-toggle.lsd-btn--smModal overlay
Full-cover dimmed overlay with a centered announcement card. Closes on backdrop click or close button.
.banner-modal-overlay.lsd-aspect--16-9.lsd-frame--shadowedStatus strip
Live uptime indicator with pulsing dot. Cycle data-status through operational / degraded / outage.
.banner-status.lsd-chip--status-dot.lsd-fx--glow-pulse