Status & feedback / Document status

Banner

A page-wide notice for an archived version, comparison view, or other document state.

Basic usage

Preview

HTML

<div class="banner tone-warn">
  <span class="banner-label">Archived</span>
  <span class="banner-body">This is an archived v1.0 document.</span>
  <a class="banner-action" href="../../">View the product →</a>
</div>

Classes & attributes

Class / attribute	Purpose
`.banner`	A band describing the whole document.
`.banner-label / .banner-body / .banner-action`	The status label, explanation, and next action.

Usage notes

Use Notice or Callout for local context. Always name the state in words.

Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.

Explore variations in Storybook ↗All components →