Data display and layout
Testimonial
A customer quote with the author name, role and avatar.
Example
<figure class="testimonial max-w-md"><blockquote class="testimonial-quote">We replaced three stylesheets with one and our pages finally match in dark mode.</blockquote><figcaption class="testimonial-author"><span class="avatar avatar-placeholder">RL</span><div><p class="testimonial-name">Rita Lopes</p><p class="testimonial-role">CTO, Fieldnote</p></div></figcaption></figure>Classes
5 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 testimonial. On a <figure> in the example. Sets flex display, alignment, gap, padding, border and corner radius.CSS |
|
| Part | Part of the testimonial. On a <blockquote> in the example. Sets text size, text style, generated content, block display, height and text color.CSS |
|
| Part | Part of the testimonial. On a <figcaption> in the example. Sets flex display, alignment and gap.CSS |
|
| Part | Part of the testimonial. On a <p> in the example. Sets font weight and text style.CSS |
|
| Part | Part of the testimonial. On a <p> in the example. Sets text size 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">
<!-- Testimonial: start from the base class, then add modifiers -->
<figure class="testimonial max-w-md"><blockquote class="testimonial-quote">We replaced three stylesheets with one and our pages finally match in dark mode.</blockquote><figcaption class="testimonial-author"><span class="avatar avatar-placeholder">RL</span><div><p class="testimonial-name">Rita Lopes</p><p class="testimonial-role">CTO, Fieldnote</p></div></figcaption></figure>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
alttext and decorative onesalt="". 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-foregroundtokens that keep text at 4.5:1 or better in light and dark mode.