Card overlay

#Example

<article class="card card-overlay card-interactive max-w-sm"><div class="card-media aspect-square bg-gradient-to-br from-info to-success"></div><div class="card-body"><h3 class="card-title"><a href="#">Coastal trail guide</a></h3><p class="card-subtitle">12 km, moderate</p></div></article>

#Classes

1 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.

.card-overlay > * {
  grid-area: 1 / 1;
}

.card-overlay {
  display: grid;
  border: 0;
  color: var(--color-neutral-50);
}

#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.

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

<!-- Card overlay: start from the base class, then add modifiers -->
<article class="card card-overlay card-interactive max-w-sm"><div class="card-media aspect-square bg-gradient-to-br from-info to-success"></div><div class="card-body"><h3 class="card-title"><a href="#">Coastal trail guide</a></h3><p class="card-subtitle">12 km, moderate</p></div></article>

#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.

#Related components