# Status

> A small pill that states where an item stands: open, closing soon, closed, new, locked or ready to use.

- Block class: `.hs-status`
- CSS: `components/status.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: none
- Status: decided
- Decision record: https://brand.honorsociety.org/decisions/directories-round.html
- Variants: All six, On a card
- HTML page: https://brand.honorsociety.org/components/status/

## What it is

A 12px uppercase pill, the same type as the [Tier badge](/components/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](/components/facts/) value.

## When not to use

- A member's tier: use the [Tier badge](/components/tier-badge/).
- A static note on a card ("Optional upgrade"): use `.hs-card__tag` in [Card](/components/card/).
- A selected filter: use a current [Filter chip](/components/chips/).
- A message about the page: use a [Callout](/components/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.

```html
<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.

```html
<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>
```