Monsoon v0.2.0
Made by Alexandre Kohler Star

Data display and layout

Card

A surface that groups related content, with header, media, body, actions and footer parts and several styles.

Data display and layout12 classesNo JavaScriptLight and dark

Example

Full

Classes

12 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 card. On an <article> in the example. Sets flex display, alignment, width, overflow, border and corner radius, and --card-p.
CSS
.card {
  --card-p: 1.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: var(--m-border-width) solid var(--border);
  border-radius: var(--m-radius-2xl);
  background: var(--surface);
  color: var(--foreground);
  box-shadow: var(--m-shadow-xs);
}
Modifier Modifier, combined with the card class. Not used in the example above. Sets flex display, alignment, gap and padding.
CSS
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--card-p) var(--card-p) 0;
}
Part Part of the card. On a <div> in the example. Sets flex display, alignment, gap and padding.
CSS
.card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--card-p);
}

.card-overlay > .card-body {
  z-index: 1;
  align-self: end;
  padding-top: 5rem;
  background: linear-gradient(to top, color-mix(in oklab, var(--color-neutral-950) 82%, transparent), transparent);
}
Part Part of the card. On a <h3> in the example. Sets text size, font weight and text style.
CSS
.card-title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
Part Part of the card. On a <p> in the example. Sets text size and text color.
CSS
.card-subtitle {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.card-overlay .card-subtitle {
  color: color-mix(in oklab, currentColor 78%, transparent);
}
Part Part of the card. On a <div> in the example. Sets flex display, alignment, gap, margin and padding.
CSS
.card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
}
Part Part of the card. On a <div> in the example. Sets block display, overflow, width and height.
CSS
.card-media {
  display: block;
  overflow: hidden;
}

.card-media > :is(img, video) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
Modifier Modifier, combined with the card class. Not used in the example above. Sets shadow.
CSS
.card-bordered {
  box-shadow: none;
}
Modifier Modifier, combined with the card class. On an <article> in the example. Sets border and shadow.
CSS
.card-elevated {
  border-color: transparent;
  box-shadow: 0 0 0 var(--m-border-width) color-mix(in oklab, var(--border) 60%, transparent), var(--m-shadow-lg);
}
Modifier Modifier, combined with the card class. Not used in the example above. Sets border and background.
CSS
.card-glass {
  border-color: color-mix(in oklab, var(--border) 70%, transparent);
  background: color-mix(in oklab, var(--surface) 62%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
}
Modifier Modifier, combined with the card class. Not used in the example above. Sets pointer cursor, transition, transform, border and shadow.
CSS
@media (prefers-reduced-motion: reduce) {
  .card-interactive:hover {
    translate: none;
  }
}

.card-interactive:has(:focus-visible) {
  outline: var(--m-ring);
  outline-offset: var(--m-ring-offset);
}

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">

<!-- Card: start from the base class, then add modifiers -->
<article class="card card-elevated max-w-sm"><div class="card-media aspect-video bg-gradient-to-br from-primary to-accent"></div><div class="card-body"><h3 class="card-title">Quarterly report</h3><p class="card-subtitle">Updated 2 hours ago</p><p class="text-sm text-muted-foreground">Revenue grew 18 percent while churn stayed flat across every region.</p><div class="card-actions"><a class="inline-flex items-center rounded-lg border border-border px-4 py-2 text-sm font-medium" href="#">Share</a><a class="inline-flex items-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground" href="#">Open</a></div></div><footer class="card-footer">3 comments</footer></article>

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 layoutCard overlayA card whose body sits over its media on a readable gradient.Data display and layoutCard sideA horizontal card with the media on the side, here in the compact size.FormsCheckbox cardA selectable card that highlights when its checkbox is checked.FormsRadio cardSelectable cards for a single choice, driven by :has(:checked).

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.