Banner

A full-width message at the top of a page or app, for things that affect everything below it.

CSS only components/banner.css

Page-wide message

<div class="dsgn-banner" data-intent="warning" role="status"><div class="dsgn-container dsgn-banner-inner"><span class="dsgn-icon" aria-hidden="true">warning</span>
  <p class="dsgn-banner-text">Your card expires on 31 October. <a href="#banner">Update payment</a></p>
  <button class="dsgn-icon-button" data-variant="ghost" data-intent="neutral" aria-label="Dismiss"><span class="dsgn-icon" aria-hidden="true">close</span></button></div></div>
<div class="dsgn-banner" data-variant="solid"><div class="dsgn-container dsgn-banner-inner"><span class="dsgn-icon" aria-hidden="true">info</span>
  <p class="dsgn-banner-text">Automatic reminders are live. <a href="#banner">See what changed</a></p></div></div>

Usage

Unlike Alert (a box inside the content), a Banner runs edge to edge above the header or the app content, with its content in the page container. One at a time.

data-variant subtle (default) | solid — solid for announcements (accent / neutral). Height = body-s line + 2 × space-8; buttons inside borrow that padding, like in Dialog.

Attributes

Attribute	Values and notes
`data-intent`	accent (default) \| neutral \| success \| warning \| danger

Details

Classes: .dsgn-banner .dsgn-banner-inner .dsgn-icon .dsgn-banner-text .dsgn-button .dsgn-icon-button
Tokens used: --dsgn-accent-border --dsgn-accent-solid --dsgn-accent-solid-text --dsgn-accent-subtle --dsgn-accent-text --dsgn-control-gap --dsgn-control-height --dsgn-control-pad-y --dsgn-danger-border --dsgn-danger-solid --dsgn-danger-solid-text --dsgn-danger-subtle --dsgn-danger-text --dsgn-focus --dsgn-focus-offset --dsgn-focus-width --dsgn-font-sans --dsgn-font-size-body-s --dsgn-font-weight-medium --dsgn-line-container --dsgn-line-height-body-s --dsgn-neutral-border --dsgn-neutral-solid --dsgn-neutral-solid-text --dsgn-neutral-subtle --dsgn-neutral-text --dsgn-radius-s --dsgn-space-8 --dsgn-success-border --dsgn-success-solid --dsgn-success-solid-text --dsgn-success-subtle --dsgn-success-text --dsgn-text --dsgn-warning-border --dsgn-warning-solid --dsgn-warning-solid-text --dsgn-warning-subtle --dsgn-warning-text
In Figma: Banner
Import alone: dsgn.systems/components/banner.css