Stack

#Example

<div class="stack w-64"><div class="card card-compact"><div class="card-body"><p class="card-title">Notification</p><p class="card-subtitle">You have 3 new messages</p></div></div><div class="card card-compact"><div class="card-body"><p class="card-title">Second</p></div></div><div class="card card-compact"><div class="card-body"><p class="card-title">Third</p></div></div></div>

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

.stack > :nth-child(1) {
  z-index: 3;
}

.stack > :nth-child(n + 4) {
  opacity: 0;
}

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

<!-- Stack: start from the base class, then add modifiers -->
<div class="stack w-64"><div class="card card-compact"><div class="card-body"><p class="card-title">Notification</p><p class="card-subtitle">You have 3 new messages</p></div></div><div class="card card-compact"><div class="card-body"><p class="card-title">Second</p></div></div><div class="card card-compact"><div class="card-body"><p class="card-title">Third</p></div></div></div>

#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