Monsoon v0.2.0
Made by Alexandre Kohler Star

Actions and feedback

Banner

A full width announcement bar for the top of the page, solid, soft or gradient.

Actions and feedback13 classesNo JavaScriptLight and dark

Example

Full

Classes

13 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

ClassTypeWhat it does
Base Base class of the banner. On a <div> in the example. Sets hidden by default, flex display, alignment, gap, width and height, and 8 custom properties.
CSS
.banner > .dismiss {
  position: absolute;
  top: 50%;
  inset-inline-end: 0.5rem;
  translate: 0 -50%;
}

:is(.dismissible, .alert, .callout, .banner, .toast-item, .notification, .chip, .tag):has(> .dismiss:not([open])) {
  display: none;
}
Modifier Modifier, combined with the banner class. On a <div> in the example. Sets border, and --banner-bg, --banner-fg and --banner-link.
CSS
.banner-soft {
  --banner-bg: color-mix(in oklab, var(--tone-tint) 10%, var(--surface));
  --banner-fg: var(--foreground);
  --banner-link: var(--tone-ink);
  border-bottom: var(--m-border-width) solid color-mix(in oklab, var(--tone-tint) 22%, var(--surface));
}
Modifier Modifier, combined with the banner class. On a <div> in the example. Sets background.
CSS
@supports not (color: oklch(from red l c h)) {
  .btn-gradient, .banner-gradient {
    background-image: none;
  }
}

.banner-gradient {
  background-image: linear-gradient(90deg, oklch(from var(--tone) l c calc(h - 35)), var(--tone), oklch(from var(--tone) l c calc(h + 35)));
}
Modifier Modifier, combined with the banner class. Not used in the example above. Sets sticky position, offsets and stacking order.
CSS
.banner-sticky {
  position: sticky;
  top: 0;
  z-index: 40;
}
Tone Primary tone. Not used in the example above. Sets --tone and --tone-fg.
CSS
.btn-primary,
.alert-primary,
.callout-primary,
.banner-primary,
.badge-primary,
.chip-primary,
.tag-primary,
.spinner-primary,
.progress-primary,
.radial-progress-primary,
.tooltip-primary,
.status-primary {
  --tone: var(--primary);
  --tone-fg: var(--primary-foreground);
}
Tone Secondary tone. Not used in the example above. Sets --tone, --tone-fg and --tone-tint.
CSS
.btn-secondary,
.alert-secondary,
.callout-secondary,
.banner-secondary,
.badge-secondary,
.chip-secondary,
.tag-secondary,
.tooltip-secondary {
  --tone: var(--secondary);
  --tone-fg: var(--secondary-foreground);
  --tone-tint: var(--secondary-foreground);
}
Tone Accent tone. Not used in the example above. Sets --tone and --tone-fg.
CSS
.btn-accent,
.alert-accent,
.callout-accent,
.banner-accent,
.badge-accent,
.chip-accent,
.tag-accent,
.spinner-accent,
.progress-accent,
.radial-progress-accent,
.tooltip-accent,
.status-accent {
  --tone: var(--accent);
  --tone-fg: var(--accent-foreground);
}
Tone Neutral tone. Not used in the example above. Sets --tone and --tone-fg.
CSS
.btn-neutral,
.alert-neutral,
.callout-neutral,
.banner-neutral,
.badge-neutral,
.chip-neutral,
.tag-neutral,
.spinner-neutral,
.progress-neutral,
.radial-progress-neutral,
.tooltip-neutral,
.status-neutral {
  --tone: var(--foreground);
  --tone-fg: var(--background);
}
Tone Success tone. Not used in the example above. Sets --tone and --tone-fg.
CSS
.btn-success,
.alert-success,
.callout-success,
.banner-success,
.badge-success,
.chip-success,
.tag-success,
.spinner-success,
.progress-success,
.radial-progress-success,
.tooltip-success,
.status-success {
  --tone: var(--success);
  --tone-fg: var(--success-foreground);
}
Tone Warning tone. On a <div> in the example. Sets --tone and --tone-fg.
CSS
.btn-warning,
.alert-warning,
.callout-warning,
.banner-warning,
.badge-warning,
.chip-warning,
.tag-warning,
.spinner-warning,
.progress-warning,
.radial-progress-warning,
.tooltip-warning,
.status-warning {
  --tone: var(--warning);
  --tone-fg: var(--warning-foreground);
}
Tone Danger tone. Not used in the example above. Sets --tone and --tone-fg.
CSS
.btn-danger,
.alert-danger,
.callout-danger,
.banner-danger,
.badge-danger,
.chip-danger,
.tag-danger,
.spinner-danger,
.progress-danger,
.radial-progress-danger,
.tooltip-danger,
.status-danger {
  --tone: var(--danger);
  --tone-fg: var(--danger-foreground);
}
Tone Info tone. Not used in the example above. Sets --tone and --tone-fg.
CSS
.btn-info,
.alert-info,
.callout-info,
.banner-info,
.badge-info,
.chip-info,
.tag-info,
.spinner-info,
.progress-info,
.radial-progress-info,
.tooltip-info,
.status-info {
  --tone: var(--info);
  --tone-fg: var(--info-foreground);
}

Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Banner: start from the base class, then add modifiers -->
<div class="space-y-3">
  <div class="banner">
    <span>Monsoon 1.0 is out with a new component layer.</span>
    <a class="banner-link" href="#">Read the post <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
    <details class="dismiss" open><summary aria-label="Dismiss"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></summary></details>
  </div>
  <div class="banner banner-gradient"><span>Spring sale: 30% off all plans this week.</span><a class="banner-link" href="#">See pricing</a></div>
  <div class="banner banner-soft banner-warning"><span>Scheduled maintenance on Sunday from 02:00 to 03:00 UTC.</span><a class="banner-link" href="#">Details</a></div>
</div>

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

Accessibility

  • Built on details and summary, so it opens with Enter or Space and screen readers announce expanded and collapsed. A shared name makes a group exclusive.
  • Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.
Actions and feedbackAlertInline messages in soft, outline and solid styles with an icon, title, description, actions and a script free dismiss.Actions and feedbackCalloutA highlighted note for documentation and long form content.Actions and feedbackToastA fixed stack for toast messages in six positions, with a contained variant for previews.Actions and feedbackBadgeSmall labels for counts and states in solid, soft and outline styles, with an optional status dot.

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.