Banner

Persistent page-level message.

html

<div class="banner banner--neutral" role="region" aria-label="Site announcement">
  <span class="banner__icon" aria-hidden="true"></span>
  <p class="banner__message">Scheduled maintenance begins at 22:00 UTC. Some features may be unavailable.</p>
  <a class="banner__action" href="#">View status page</a>
  <button type="button" class="banner__close" aria-label="Dismiss announcement">×</button>
</div>
<style>
.banner { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 640px; box-sizing: border-box;
  padding: 12px 16px; font: 14px/1.4 system-ui, sans-serif; color: #FAF7F2; border-radius: 8px; }
.banner__icon { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; position: relative; background: #FAF7F2; }
.banner__icon::before { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px/1 system-ui, sans-serif; }
.banner--neutral { background: #241430; }
.banner--neutral .banner__icon::before { content: "i"; color: #241430; }
.banner--success { background: #216B45; }
.banner--success .banner__icon::before { content: "✓"; color: #216B45; }
.banner--warning { background: #8A5A08; }
.banner--warning .banner__icon::before { content: "!"; color: #8A5A08; }
.banner--critical { background: #8C1F17; }
.banner--critical .banner__icon::before { content: "‼"; color: #8C1F17; }
.banner__message { flex: 1; margin: 0; }
.banner__action { color: #FAF7F2; font-weight: 600; text-decoration: underline; white-space: nowrap; }
.banner__action:focus-visible { outline: 2px solid #FAF7F2; outline-offset: 2px; }
.banner__close { border: none; background: transparent; color: #FAF7F2; font-size: 16px; line-height: 1; cursor: pointer; padding: 2px; border-radius: 4px; }
.banner__close:hover { background: #FAF7F224; }
.banner__close:focus-visible { outline: 2px solid #FAF7F2; outline-offset: 2px; }
</style>

tailwind

<div role="region" aria-label="Site announcement" class="banner-tw banner-tw--neutral flex items-center gap-3 w-full max-w-xl box-border px-4 py-3 rounded-lg text-[#FAF7F2] font-sans text-sm">
  <span class="banner-tw__icon w-[18px] h-[18px] rounded-full flex-shrink-0 bg-[#FAF7F2]" aria-hidden="true"></span>
  <p class="flex-1 m-0">Scheduled maintenance begins at 22:00 UTC. Some features may be unavailable.</p>
  <a href="#" class="text-[#FAF7F2] font-semibold underline whitespace-nowrap">View status page</a>
  <button type="button" aria-label="Dismiss announcement" class="border-0 bg-transparent text-[#FAF7F2] text-base leading-none cursor-pointer p-0.5 rounded hover:bg-white/15">×</button>
</div>
<style>
.banner-tw__icon { position: relative; }
.banner-tw__icon::before { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px/1 system-ui, sans-serif; }
.banner-tw--neutral { background: #241430; }
.banner-tw--neutral .banner-tw__icon::before { content: "i"; color: #241430; }
.banner-tw--success { background: #216B45; }
.banner-tw--success .banner-tw__icon::before { content: "✓"; color: #216B45; }
.banner-tw--warning { background: #8A5A08; }
.banner-tw--warning .banner-tw__icon::before { content: "!"; color: #8A5A08; }
.banner-tw--critical { background: #8C1F17; }
.banner-tw--critical .banner-tw__icon::before { content: "‼"; color: #8C1F17; }
</style>

react

export function Banner({
  message = "Scheduled maintenance begins at 22:00 UTC. Some features may be unavailable.",
  tone = "neutral",
  actionLabel = "View status page",
  dismissible = true,
}) {
  const palette = {
    neutral: { c: "#241430", icon: "i" },
    success: { c: "#216B45", icon: "✓" },
    warning: { c: "#8A5A08", icon: "!" },
    critical: { c: "#8C1F17", icon: "‼" },
  }[tone] ?? { c: "#241430", icon: "i" };
  return (
    <div role="region" aria-label="Site announcement" style={{ display: "flex", alignItems: "center", gap: 12,
      width: "100%", maxWidth: 640, boxSizing: "border-box", padding: "12px 16px", borderRadius: 8,
      background: palette.c, color: "#FAF7F2", font: "14px/1.4 system-ui, sans-serif" }}>
      <span aria-hidden="true" style={{ width: 18, height: 18, borderRadius: "50%", flexShrink: 0, background: "#FAF7F2",
        display: "grid", placeItems: "center", color: palette.c, fontSize: 11, fontWeight: 700 }}>{palette.icon}</span>
      <p style={{ flex: 1, margin: 0 }}>{message}</p>
      <a href="#" style={{ color: "#FAF7F2", fontWeight: 600, textDecoration: "underline", whiteSpace: "nowrap" }}>{actionLabel}</a>
      {dismissible && (
        <button type="button" aria-label="Dismiss announcement" style={{ border: "none", background: "transparent",
          color: "#FAF7F2", fontSize: 16, cursor: "pointer", padding: 2, borderRadius: 4 }}>×</button>
      )}
    </div>
  );
}