Alert Banner — StealThis.dev

Code

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Inter, system-ui, sans-serif;
  background: #050910;
  color: #f2f6ff;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.demo {
  width: 100%;
  max-width: 620px;
}

.demo-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 0.375rem;
}

.demo-sub {
  color: #475569;
  font-size: 0.875rem;
  margin-bottom: 2rem;
}

.alerts-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ── Alert base ── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  border-radius: 0.75rem;
  border-left: 4px solid;
  background: var(--alert-bg);
  border-color: var(--alert-color);
  transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease;
  overflow: hidden;
}

.alert--dismissing {
  opacity: 0;
  transform: translateX(12px);
  max-height: 0 !important;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: -0.75rem;
}

/* ── Variants ── */
.alert--info {
  --alert-color: #38bdf8;
  --alert-bg: rgba(56, 189, 248, 0.08);
}
.alert--success {
  --alert-color: #22c55e;
  --alert-bg: rgba(34, 197, 94, 0.08);
}
.alert--warning {
  --alert-color: #f59e0b;
  --alert-bg: rgba(245, 158, 11, 0.08);
}
.alert--error {
  --alert-color: #ef4444;
  --alert-bg: rgba(239, 68, 68, 0.08);
}

/* ── Icon ── */
.alert-icon {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--alert-color);
  flex-shrink: 0;
  margin-top: 0.05rem;
}

/* ── Body ── */
.alert-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.alert-title {
  color: #f2f6ff;
  font-weight: 600;
}

.alert-desc {
  color: #94a3b8;
}

/* ── Dismiss ── */
.alert-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #475569;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  transition: color 0.15s, background 0.15s;
}

.alert-dismiss:hover {
  color: #f2f6ff;
  background: rgba(255, 255, 255, 0.06);
}

(function () {
  document.querySelectorAll(".alert-dismiss").forEach(function (btn) {
    btn.addEventListener("click", function () {
      var alert = btn.closest(".alert");
      if (!alert) return;
      alert.style.maxHeight = alert.offsetHeight + "px";
      requestAnimationFrame(function () {
        alert.classList.add("alert--dismissing");
      });
      alert.addEventListener(
        "transitionend",
        function () {
          alert.remove();
        },
        { once: true }
      );
    });
  });
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Alert Banner</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="demo">
    <h1 class="demo-title">Alert Banner</h1>
    <p class="demo-sub">Four semantic variants, all dismissible.</p>

    <div class="alerts-stack">
      <!-- Info -->
      <div class="alert alert--info" role="alert">
        <span class="alert-icon" aria-hidden="true">ℹ</span>
        <div class="alert-body">
          <strong class="alert-title">Heads up</strong>
          <span class="alert-desc">Your trial ends in 3 days. Upgrade to keep access to all features.</span>
        </div>
        <button class="alert-dismiss" aria-label="Dismiss">&times;</button>
      </div>

      <!-- Success -->
      <div class="alert alert--success" role="alert">
        <span class="alert-icon" aria-hidden="true">✓</span>
        <div class="alert-body">
          <strong class="alert-title">Changes saved</strong>
          <span class="alert-desc">Your profile has been updated successfully.</span>
        </div>
        <button class="alert-dismiss" aria-label="Dismiss">&times;</button>
      </div>

      <!-- Warning -->
      <div class="alert alert--warning" role="alert">
        <span class="alert-icon" aria-hidden="true">⚠</span>
        <div class="alert-body">
          <strong class="alert-title">Storage almost full</strong>
          <span class="alert-desc">You're using 92% of your storage quota. Free up space or upgrade.</span>
        </div>
        <button class="alert-dismiss" aria-label="Dismiss">&times;</button>
      </div>

      <!-- Error -->
      <div class="alert alert--error" role="alert">
        <span class="alert-icon" aria-hidden="true">✕</span>
        <div class="alert-body">
          <strong class="alert-title">Payment failed</strong>
          <span class="alert-desc">We couldn't process your payment. Please check your card details and try again.</span>
        </div>
        <button class="alert-dismiss" aria-label="Dismiss">&times;</button>
      </div>

      <!-- No dismiss -->
      <div class="alert alert--info alert--no-dismiss" role="alert">
        <span class="alert-icon" aria-hidden="true">ℹ</span>
        <div class="alert-body">
          <strong class="alert-title">Read-only mode</strong>
          <span class="alert-desc">You're viewing a shared document. Request edit access to make changes.</span>
        </div>
      </div>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

Contextual feedback messages for user actions — four semantic variants, each dismissible.

Variants

Variant	Color	Use case
`info`	Blue	Informational messages, tips
`success`	Green	Completed actions, confirmations
`warning`	Amber	Caution, reversible actions
`error`	Red	Failures, destructive outcomes

Features

Optional dismiss × button — removes with a fade-out animation
Left accent border for quick visual scanning
Icon prefix for each variant
Accessible role="alert" markup