Monsoon v0.2.0
Made by Alexandre Kohler Star

Actions and feedback

Callout

A highlighted note for documentation and long form content.

Actions and feedback10 classesNo JavaScriptLight and dark

Example

Full

Classes

10 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 callout. On a <div> in the example. Sets hidden by default, block display, padding, border, corner radius and background, and 5 custom properties.
CSS
.callout > .dismiss {
  position: absolute;
  top: 0.5rem;
  inset-inline-end: 0.5rem;
}

:is(.dismissible, .alert, .callout, .banner, .toast-item, .notification, .chip, .tag):has(> .dismiss:not([open])) {
  display: none;
}
Part Part of the callout. On a <p> in the example. Sets flex display, alignment, gap, margin, text color and font weight.
CSS
.callout-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  color: var(--tone-ink);
  font-weight: 600;
}

:where(.callout-title > svg) {
  width: 1rem;
  height: 1rem;
  flex: none;
}
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. On a <div> in the example. 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">

<!-- Callout: start from the base class, then add modifiers -->
<div class="space-y-3">
  <div class="callout">
    <p class="callout-title"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg> Note</p>
    <p>Theme tokens follow the seed color, so callouts match your brand.</p>
  </div>
  <div class="callout callout-warning">
    <p class="callout-title"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/><path d="M12 9v4M12 17h.01"/></svg> Heads up</p>
    <p>This setting affects every project in the workspace.</p>
  </div>
  <div class="callout callout-success"><p class="callout-title">Tip</p><p>Press <kbd class="kbd kbd-sm">/</kbd> to search.</p></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

  • 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 feedbackSwapSwaps two pieces of content when its checkbox is checked, with fade, rotate, scale and flip effects.Actions and feedbackAlertInline messages in soft, outline and solid styles with an icon, title, description, actions and a script free dismiss.Actions and feedbackBannerA full width announcement bar for the top of the page, solid, soft or gradient.Actions and feedbackToastA fixed stack for toast messages in six positions, with a contained variant for previews.

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.