Banner

Recipe CSS

This is the exact CSS your kit ships for Banner — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.

/* === Banner ===
   Page-level alert — wider than a toast, persistent until dismissed.
   Sits at the very top of the content area. Tone variants mirror alerts. */
.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--k-s-10);
  padding: var(--k-space, 16px);
  background: var(--k-info-soft);
  color: var(--k-info-soft-fg);
  font-size: var(--k-type-small);
  border-bottom: var(--k-divider);
}
.banner--success { background: var(--k-success-soft); color: var(--k-success-soft-fg); }
.banner--warn    { background: var(--k-warning-soft); color: var(--k-warning-soft-fg); }
.banner--danger  { background: var(--k-danger-soft);  color: var(--k-danger-soft-fg); }
/* Explicit info variant — the base is already info-toned, but defining the
 * modifier completes the semantic family (success/warn/danger/info) so
 * `banner--info` (used by Cloud's status notice) is correct by definition,
 * not by accident, and survives a future change to the base default. */
.banner--info    { background: var(--k-info-soft);    color: var(--k-info-soft-fg); }
.banner__body { flex: 1; min-width: 0; }
.banner__link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.banner__close {
  background: transparent;
  border: 0;
  padding: var(--k-s-4);
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
  display: inline-flex;
  border-radius: var(--k-radius-md);
  transition: background var(--k-dur-fast, 120ms) var(--k-ease, ease), opacity var(--k-dur-fast, 120ms) var(--k-ease, ease), color var(--k-dur-fast, 120ms) var(--k-ease, ease);
}
.banner__close:hover { opacity: 1; background: var(--k-state-hover); }