Section

#Example

<section class="section section-sm section-muted"><div class="container-narrow"><h2 class="text-2xl font-bold">Section title</h2></div></section>

#Classes

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

.section {
  padding-block: clamp(3rem, 8vw, 6rem);
}

.section-sm {
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

.section-lg {
  padding-block: clamp(4rem, 12vw, 9rem);
}

.section-muted {
  background: var(--surface-2);
}

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

<!-- Section: start from the base class, then add modifiers -->
<section class="section section-sm section-muted"><div class="container-narrow"><h2 class="text-2xl font-bold">Section title</h2></div></section>

#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