Monsoon v0.2.0
Made by Alexandre Kohler Star

Data display and layout

List

Rows with leading media, text and a trailing action, optionally divided, bordered and hoverable.

Data display and layout10 classesNo JavaScriptLight and dark

Example

Full

Classes

10 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 list. On an <ul> in the example. Sets flex display and alignment.
CSS
.list {
  display: flex;
  flex-direction: column;
}

:where(.list) > .list-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 1rem;
  color: inherit;
}
Part Part of the list. On a <li> in the example. A hook for state rules such as :where(.list) > .list-item.
CSS
.list-hover > .list-item:hover {
  background: var(--surface-2);
}

.list-hover > .list-item {
  transition: background-color var(--m-duration-fast);
}
Modifier Modifier, combined with the list class. On an <ul> in the example. Sets border.
CSS
.list-divided > .list-item + .list-item {
  border-top: var(--m-border-width) solid var(--border);
}
Modifier Modifier, combined with the list class. On an <ul> in the example. Sets overflow, border, corner radius and background.
CSS
.list-bordered {
  overflow: hidden;
  border: var(--m-border-width) solid var(--border);
  border-radius: var(--m-radius-xl);
  background: var(--surface);
}
Modifier Modifier, combined with the list class. On an <ul> in the example. Sets transition and background.
CSS
.list-hover > .list-item:hover {
  background: var(--surface-2);
}

.list-hover > .list-item {
  transition: background-color var(--m-duration-fast);
}
Part Part of the list. On a <span> in the example. Sets flex display and alignment.
CSS
.list-media {
  display: flex;
  flex-shrink: 0;
}
Part Part of the list. On a <div> in the example. Sets alignment and width.
CSS
.list-content {
  flex: 1;
  min-width: 0;
}
Part Part of the list. On a <p> in the example. Sets overflow, font weight and text style.
CSS
.list-title {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
Part Part of the list. On a <p> in the example. Sets text size and text color.
CSS
.list-description {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
Part Part of the list. On a <span> in the example. Sets flex display, alignment, gap, margin, text color and text size.
CSS
.list-action {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
  margin-inline-start: auto;
  color: var(--muted-foreground);
  font-size: 0.875rem;
}

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

<!-- List: start from the base class, then add modifiers -->
<ul class="list list-divided list-bordered list-hover max-w-md"><li class="list-item"><span class="list-media avatar avatar-placeholder avatar-online">AK</span><div class="list-content"><p class="list-title">Ana Kohler</p><p class="list-description">Design lead</p></div><span class="list-action">Owner</span></li><li class="list-item"><span class="list-media avatar avatar-placeholder">MS</span><div class="list-content"><p class="list-title">Marco Silva</p><p class="list-description">Frontend engineer</p></div><a class="list-action" href="#">Edit</a></li><li class="list-item"><span class="list-media avatar avatar-placeholder avatar-offline">JD</span><div class="list-content"><p class="list-title">Julia Duarte</p><p class="list-description">Product manager</p></div><a class="list-action" href="#">Edit</a></li></ul>

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

  • Give meaningful images an alt text and decorative ones alt="". Initials avatars should expose the full name to screen readers.
  • 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 layoutAvatarA picture or initials for a person, with sizes, shapes, a ring and a status dot.Data display and layoutAvatar groupOverlapping avatars with a count for the rest.Data display and layoutTableData tables with zebra rows, hover rows, compact cells, cell borders, a pinned header and first column, inside a scroll wrapper.Data display and layoutTimelineEvents on a line with dots or icons, vertical, horizontal or alternating sides.

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.