Data display and layout
Prose
Typography for long form HTML such as articles and Markdown output, in three sizes.
Example
<article class="prose"><h2>Getting started</h2><p>Add the stylesheet, then pick a <a href="#">seed color</a>. Everything else is <strong>derived</strong> from it.</p><ul><li>No build step</li><li>Automatic dark mode</li></ul><pre><code><link rel="stylesheet" href="monsoon.min.css"></code></pre><blockquote>Write markup, not configuration.</blockquote><p>Use <code>--seed</code> on any element to theme a section.</p></article>Classes
3 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 prose. On an <article> in the example. Sets background, text color, shadow, width, text size and text style, and --prose-size.CSS |
|
| Size | Small size. Not used in the example above. Sets text style, and --prose-size.CSS |
|
| Size | Large size. Not used in the example above. Sets text style, and --prose-size.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">
<!-- Prose: start from the base class, then add modifiers -->
<article class="prose"><h2>Getting started</h2><p>Add the stylesheet, then pick a <a href="#">seed color</a>. Everything else is <strong>derived</strong> from it.</p><ul><li>No build step</li><li>Automatic dark mode</li></ul><pre><code><link rel="stylesheet" href="monsoon.min.css"></code></pre><blockquote>Write markup, not configuration.</blockquote><p>Use <code>--seed</code> on any element to theme a section.</p></article>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.