STATUS TILE: A workflow stage, its current status, an optional count and corner badge
COMPOSES: Card (for the tone) | Progress | Badge
Student records show three at once — Application, Enrolment, Offer. The tile is a
.tw-card, so its tones are the card's own contrast-checked grounds rather than a
second set of colours that would drift from them. The important part of this component is
the fixed mapping from status to tone — a stage that is green on one screen and orange on
another teaches staff that colour means nothing.
Three at once, in journey order — Application, then Enrolment, then Offer. Keep the order fixed across records so staff read position as meaning.
<div class="tw-card tw-card-positive tw-status-tile"><span class="tw-status-tile-label">Application</span><span class="tw-status-tile-value">Submitted</span>…</div>
Tone answers one question: does this stage need someone to do something? Green = done, nothing owed. Orange = the school or family owes an action. Red = blocked or refused. Blue = in progress, nothing owed yet. Never pick tone by stage — "Offer" is not inherently blue; it is blue while awaiting a response and green once accepted.
.tw-card-positive | .tw-card-highlight | .tw-card-caution | .tw-card-negative
The badge marks something about the tile itself, not the status — "Demo" data, a "New" stage, a count of outstanding items. It is positioned, not floated, so a long status value wraps beneath it rather than colliding with it.
<span class="tw-badge tw-badge-secondary-subtle tw-badge-sm tw-status-tile-badge">Demo</span>