Callouts & Cards
These components add rhythm and signposting to a page — use them to break up long prose and to surface the thing a reader must not miss.
Callouts
Four semantic shortcuts cover most needs. Each sets its own icon and colour.
::note
A neutral aside — context the reader may want.
::
::tip
A pro tip or recommended path.
::
::warning
Something to be careful about.
::
::caution
A destructive or irreversible action.
::
Custom callout
The generic ::callout takes your own icon, color, and an optional to to make the
whole block a link.
::callout{icon="i-lucide-git-branch" color="primary" to="https://klstr.tech"}
Read the deployment runbook before pushing to `main`.
::
Cards
A ::card is a titled panel; add to to make it a clickable link (external links get an
icon automatically).
::card{title="Provisioning" icon="i-lucide-cpu" to="/en/internal/admin/dashboard"}
Bring a new device online and assign it to a fleet.
::
Card grid
Wrap cards in ::card-group for a responsive two-column grid.
Art-Net
sACN
::card-group
::card{title="Art-Net" icon="i-lucide-network"}
Ethernet DMX transport.
::
::card{title="sACN" icon="i-lucide-radio"}
Streaming ACN (E1.31).
::
::
Changing the column count
::card-group is a plain CSS grid whose default classes are
grid grid-cols-1 sm:grid-cols-2 gap-5 my-5 *:my-0, so three cards wrap as 2 + 1.
It accepts a class prop, and Tailwind's class merging means the class you pass
replaces the default from the same utility group rather than fighting it.
| What you pass | Result |
|---|---|
| nothing | 1 column on mobile, 2 from sm (the default) |
{class="sm:grid-cols-3"} | 3 across, never 2 + 1 |
{class="sm:grid-cols-4"} | 4 across |
{class="sm:grid-cols-1"} | always one column, a vertical stack |
{class="sm:grid-cols-2 lg:grid-cols-4"} | responsive ladder: 2 on tablet, 4 on desktop |
{class="gap-3"} / {class="gap-8"} | tighter or looser spacing, column count unchanged |
content/**/* (see the @source lines in .nuxt/docus.css), but that scan does not
re-run on content hot reload. The symptom is confusing: the class is present in the
rendered HTML and nothing changes visually, because no CSS rule was generated for it.
Restart npm run dev and it appears.Art-Net
sACN
RDM
:::card-group{class="sm:grid-cols-3"}
::card{title="Art-Net" icon="i-lucide-network"}
Ethernet DMX transport.
::
::card{title="sACN" icon="i-lucide-radio"}
Streaming ACN (E1.31).
::
::card{title="RDM" icon="i-lucide-radio-tower"}
Device management over DMX.
::
:::
One card spanning two columns
::card also takes a class, so a card can be made wider than its neighbours inside
a multi-column group.
:::card-group{class="sm:grid-cols-3"}
::card{title="Primary" class="sm:col-span-2"}
Takes two of the three columns.
::
::card{title="Secondary"}
Takes the remaining one.
::
:::
Other layout wrappers
::card-group is not the only container. Any Nuxt UI component works from MDC under
its U-prefixed name, which gives a few ready-made layouts with different defaults:
| Wrapper | Layout |
|---|---|
:::card-group | Grid, 1 / 2 from sm. gap-5. The prose default |
:::u-page-grid | Grid, 1 / 2 from sm / 3 from lg, gap-8. Use when you want 3 across without passing a class |
:::u-page-columns | Masonry style CSS columns, 1 / 2 from md / 3 from lg. Cards keep their natural height and flow into the shortest column |
:::u-page-list | Vertical stack (flex column). Add {divide} for separator lines between items |
| no wrapper at all | Consecutive ::card blocks stack full width, one per row |
u-page-grid and u-page-columns are the quickest way to a straight three-across row
or a magazine-style flow without touching Tailwind classes at all. Reach for a class
override on ::card-group when you want an exact column count at an exact breakpoint.Fields (for documenting APIs)
::field documents a single parameter — name, type, whether it's required, and a
description. Group them with ::field-group.
0–32767.::field-group
::field{name="universe" type="number" required}
Art-Net universe, `0`–`32767`.
::
::field{name="label" type="string"}
Human-friendly device name shown in KLSTR.ctrl.
::
::field{name="rdm" type="boolean"}
Enable RDM discovery (KLSTR.one only).
::
::