Components
Attention card
Attention card
A "needs attention" card — a clickable card with a leading icon in a tinted circle, a big count, a one-line description, and a trailing arrow. Stack several for the conveyancer dashboard's "Needs attention" list or the partner "Your tasks" widget; each deep-links to a pre-filtered list.
Canonical
<a koala-attention-card koala-attention-card-icon="Clock" koala-attention-card-count="3"
href="@url" x-target.push="main" data-skeleton="list">
transactions with no update in 14+ days
</a>
The whole card is the link (default Alpine-AJAX target main). Hide a card whose
count is 0 rather than showing "0" — the dashboard shows a calm "all caught up" empty state when every signal is clear.
Stacked
States
Hover lifts the card (shadow-floating) — the standard clickable-card affordance.
Props
3 attributes| Attribute | Values | Notes |
|---|---|---|
| koala-attention-card-icon | IconName | Leading icon, shown in a tinted circle. |
| koala-attention-card-count | int | The count shown as the card's headline figure. |
| (content) | slot | One-line description completing the sentence after the count. |
Do & don't
Do
Use it for a derived signal that needs a nudge and deep-links to the work.
Don't
Don't show a card with a count of 0 — hide it, or show one calm empty state for the whole list.