EMPTY STATE: Consistent empty/error message block
COMPOSES: typography tokens | .btn | Font Awesome icon
Icon over title over supporting text over actions, centered. Use inside
.card-body, table bodies, or results columns. The error variant
carries the C08 copy contract: what went wrong, why + next step, recovery action.
Default: clear message, suggested action, neutral tone.
Applications will appear here once families begin submitting. Invited families receive a link straight away.
<div class="empty-state"><i class="fa-regular fa-folder-open empty-state-icon" aria-hidden="true"></i><h3 class="empty-state-title">…</h3><p class="empty-state-text">…</p><div class="empty-state-actions">…</div></div>
Search/filter miss: say what produced zero, offer the way back.
Nothing within 3 miles matches "Outstanding" + "Sixth form". Try widening the distance or removing a filter.
Error (C08 contract): what went wrong · cause + next step · recovery action. Danger ink on icon and title only; body text stays neutral for readability.
The connection timed out before the list arrived. Your data is safe — try again, and contact support if it keeps happening.
<div class="empty-state empty-state-error" role="alert">…</div>