Data display and layout
Card side
A horizontal card with the media on the side, here in the compact size.
Example
<article class="card card-side card-compact card-bordered max-w-xl"><div class="card-media bg-gradient-to-br from-warning to-danger"></div><div class="card-body"><h3 class="card-title">Weekend workshop</h3><p class="text-sm text-muted-foreground">Two days of hands on sessions about design tokens and theming.</p><div class="card-actions"><a class="inline-flex items-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground" href="#">Reserve a seat</a></div></div></article>Classes
2 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 card side. On an <article> in the example. Sets alignment.CSS |
|
| Modifier | Modifier, combined with the card-side class. On an <article> in the example. Sets --card-p.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">
<!-- Card side: start from the base class, then add modifiers -->
<article class="card card-side card-compact card-bordered max-w-xl"><div class="card-media bg-gradient-to-br from-warning to-danger"></div><div class="card-body"><h3 class="card-title">Weekend workshop</h3><p class="text-sm text-muted-foreground">Two days of hands on sessions about design tokens and theming.</p><div class="card-actions"><a class="inline-flex items-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground" href="#">Reserve a seat</a></div></div></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.