Status

What it is

A 12px uppercase pill, the same type as the Tier badge. Six variants, each with its own label and fill. The label carries the meaning; the colour only repeats it.

When to use

• A scholarship's state from its deadline: --open, --soon ("Closing soon"), --closed.
• A new item in a catalog: --new.
• A benefit the viewer can use now (--ready, "Ready to use") or one above the viewer's tier (--locked, "Bronze and up").
• In a card foot, a result type line, or a Facts value.

When not to use

• A member's tier: use the Tier badge.
• A static note on a card ("Optional upgrade"): use .hs-card__tag in Card.
• A selected filter: use a current Filter chip.
• A message about the page: use a Callout.

Rules

• Markup: span.hs-status.hs-status--{open|soon|closed|new|locked|ready} with the label in sentence case. CSS uppercases it.
• Labels: "Open", "Closing soon", "Closed", "New", "Ready to use". A locked label names what unlocks it: "Bronze and up", "Active membership".
• Code computes the state (from the deadline, the publish date, the viewer's tier). Never type a state into copy.
• One status per item.
• Never gold or honor gold: gold is the colour of action and of recognition, never of a state.

Accessibility

• The label is real text, so the state reads without colour.
• Contrast: open success 4.8:1, closing soon warning 4.5:1, closed slate 5.9:1, new navy 10.9:1, locked plate muted 5.4:1, ready white on navy 12.4:1.
• It is not interactive: no hover, no focus.

Variants

All six

Each variant with its usual label.

<span class="hs-status hs-status--open">Open</span>
<span class="hs-status hs-status--soon">Closing soon</span>
<span class="hs-status hs-status--closed">Closed</span>
<span class="hs-status hs-status--new">New</span>
<span class="hs-status hs-status--locked">Bronze and up</span>
<span class="hs-status hs-status--ready">Ready to use</span>

On a card

In the card foot, beside the deadline.

<a class="hs-card hs-card--link hs-card--award" href="/scholarships/example-leadership-award">
  <p class="hs-card__value">$2,500</p>
  <h3 class="hs-card__title">Example Leadership Award</h3>
  <p class="hs-card__meta">Offered by Honor Society&reg;</p>
  <div class="hs-card__foot">
    <span class="hs-status hs-status--soon">Closing soon</span>
    <p class="hs-card__meta">Deadline <time datetime="2026-10-31">October 31, 2026</time></p>
  </div>
</a>