Monsoon v0.2.0
Made by Alexandre Kohler Star

Data display and layout

Feature grid

An auto fitting grid of features with icon, title and text.

Data display and layout5 classesNo JavaScriptLight and dark

Example

Full

Classes

5 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 feature grid. On a <div> in the example. Sets grid display, grid tracks and gap.
CSS
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 2.25rem 1.75rem;
}
Part Part of the feature grid. On a <div> in the example. Sets flex display, alignment and gap.
CSS
.feature {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
Part Part of the feature grid. On a <span> in the example. Sets grid display, alignment, width, height, margin and corner radius.
CSS
.feature-icon > svg {
  width: 1.375rem;
  height: 1.375rem;
}

.feature-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.5rem;
  border-radius: var(--m-radius-xl);
  background: color-mix(in oklab, var(--primary) 13%, transparent);
  color: var(--primary);
}
Part Part of the feature grid. On a <h3> in the example. Sets text size and font weight.
CSS
.feature-title {
  font-size: 1.0625rem;
  font-weight: 600;
}
Part Part of the feature grid. On a <p> in the example. Sets text size, text style and text color.
CSS
.feature-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted-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">

<!-- Feature grid: start from the base class, then add modifiers -->
<div class="feature-grid"><div class="feature"><span class="feature-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8Z"/></svg></span><h3 class="feature-title">No build step</h3><p class="feature-text">Link one file from a CDN and start writing markup.</p></div><div class="feature"><span class="feature-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5 9-5Zm-9 9 9 5 9-5"/></svg></span><h3 class="feature-title">Seed theming</h3><p class="feature-text">Every color comes from a single seed, with AA contrast kept.</p></div><div class="feature"><span class="feature-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6l-8-3Z"/></svg></span><h3 class="feature-title">Accessible</h3><p class="feature-text">Native elements, visible focus and reduced motion support.</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.
Data display and layoutGrid autoAs many columns as fit, each at least --grid-min wide.Data display and layoutDividerA horizontal or vertical rule with optional text, alignment and tones.Data display and layoutHeroA large opening section with centered content, an optional image overlay and a seed tinted gradient.Data display and layoutPricingA set of plan cards with price, feature list and a featured plan.

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.