Monsoon v0.2.0
Made by Alexandre Kohler Star

Data display and layout

Timeline

Events on a line with dots or icons, vertical, horizontal or alternating sides.

Data display and layout8 classesNo JavaScriptLight and dark

Example

Full

Classes

8 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 timeline. On an <ol> in the example. Sets flex display and alignment.
CSS
.timeline {
  display: flex;
  flex-direction: column;
}
Part Part of the timeline. On a <li> in the example. Sets grid display, grid tracks, gap, padding, generated content and absolute position.
CSS
.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item:first-child::before {
  top: 1rem;
}
Part Part of the timeline. On a <span> in the example. Sets stacking order, grid tracks, alignment, corner radius, shadow and width.
CSS
.timeline-dot {
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.5625rem;
  background: var(--primary);
}

.timeline-dot, .timeline-icon {
  z-index: 1;
  grid-row: 1;
  grid-column: 1;
  justify-self: center;
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--background);
}
Part Part of the timeline. On a <span> in the example. Sets stacking order, grid tracks, alignment, corner radius, shadow and grid display.
CSS
.timeline-icon > svg {
  width: 1rem;
  height: 1rem;
}

@media (min-width: 640px) {
  .timeline-alternate :is(.timeline-dot, .timeline-icon) {
    grid-column: 2;
  }
}
Part Part of the timeline. On a <div> in the example. Sets grid tracks, width and padding.
CSS
.timeline-content {
  grid-row: 1;
  grid-column: 2;
  min-width: 0;
  padding-top: 0.25rem;
}

@media (min-width: 640px) {
  .timeline-alternate .timeline-content {
    grid-column: 3;
  }
}
Part Part of the timeline. On a <time> in the example. Sets block display, margin, text size and text color.
CSS
.timeline-time {
  display: block;
  margin-bottom: 0.125rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}
Modifier Modifier, combined with the timeline class. Not used in the example above. Sets alignment, overflow, grid tracks, padding, offsets and width.
CSS
.timeline-horizontal {
  flex-direction: row;
  overflow-x: auto;
}

.timeline-horizontal > .timeline-item:first-child::before {
  left: 1rem;
}
Part Part of the timeline. Not used in the example above. Sets grid tracks, offsets and text style.
CSS
@media (min-width: 640px) {
  .timeline-alternate .timeline-content {
    grid-column: 3;
  }
}

@media (min-width: 640px) {
  .timeline-alternate > .timeline-item::before {
    left: calc(50% - 1px);
  }
}

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

<!-- Timeline: start from the base class, then add modifiers -->
<ol class="timeline"><li class="timeline-item"><span class="timeline-dot"></span><div class="timeline-content"><time class="timeline-time">Mar 2026</time><p class="font-semibold">Project started</p><p class="text-sm text-muted-foreground">First commit and the token formulas.</p></div></li><li class="timeline-item"><span class="timeline-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8Z"/></svg></span><div class="timeline-content"><time class="timeline-time">Jun 2026</time><p class="font-semibold">Public beta</p><p class="text-sm text-muted-foreground">One stylesheet from a CDN.</p></div></li><li class="timeline-item"><span class="timeline-dot bg-success"></span><div class="timeline-content"><time class="timeline-time">Oct 2026</time><p class="font-semibold">Components</p><p class="text-sm text-muted-foreground">Cards, tables, timelines and more.</p></div></li></ol>

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 layoutListRows with leading media, text and a trailing action, optionally divided, bordered and hoverable.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 layoutStatsKey numbers with a title, value, description, figure and up or down trend.Data display and layoutCollapseA details element that opens and closes, with an arrow or plus icon.

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.