Data display and layout
Countdown
Number boxes with labels; the value is text or the --value custom property.
Example
<div class="countdown" role="timer" aria-label="12 days, 4 hours, 36 minutes and 9 seconds left"><div class="countdown-box"><span class="countdown-value" style="--value: 12"></span><span class="countdown-label">Days</span></div><div class="countdown-box"><span class="countdown-value" style="--value: 4"></span><span class="countdown-label">Hours</span></div><div class="countdown-box"><span class="countdown-value" style="--value: 36"></span><span class="countdown-label">Minutes</span></div><div class="countdown-box"><span class="countdown-value" style="--value: 9"></span><span class="countdown-label">Seconds</span></div></div>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.
| Class | Type | What it does |
|---|---|---|
| Base | Base class of the countdown. On a <div> in the example. Sets flex display, alignment and gap.CSS |
|
| Part | Part of the countdown. On a <div> in the example. Sets flex display, alignment, width, padding, border and corner radius.CSS |
|
| Part | Part of the countdown. On a <span> in the example. Sets text size, font weight, text style and generated content.CSS |
|
| Part | Part of the countdown. On a <span> in the example. Sets margin, text size, font weight, text style and text color.CSS |
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">
<!-- Countdown: start from the base class, then add modifiers -->
<div class="countdown" role="timer" aria-label="12 days, 4 hours, 36 minutes and 9 seconds left"><div class="countdown-box"><span class="countdown-value" style="--value: 12"></span><span class="countdown-label">Days</span></div><div class="countdown-box"><span class="countdown-value" style="--value: 4"></span><span class="countdown-label">Hours</span></div><div class="countdown-box"><span class="countdown-value" style="--value: 36"></span><span class="countdown-label">Minutes</span></div><div class="countdown-box"><span class="countdown-value" style="--value: 9"></span><span class="countdown-label">Seconds</span></div></div>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-foregroundtokens that keep text at 4.5:1 or better in light and dark mode.