# Tier badge

> The tier name as a small solid pill in the tier colour, on the credential card and in lists.

- Block class: `.hs-tier-badge`
- CSS: `components/tier-badge.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: none
- Status: decided
- Decision record: https://brand.honorsociety.org/decisions/components-round-2a.html
- Variants: All tiers
- HTML page: https://brand.honorsociety.org/components/tier-badge/

## What it is

The tier name as a small solid pill: 12px/600/0.12em, uppercase. Silver and gold get a 1px inset edge so they stay visible on white. Use it on the credential card and in lists, never on the recognition plate.

## When to use

- Use it in the credential card title, next to the tier name.
- Use it in lists that show a tier per row, such as benefits that a tier unlocks.
- Use it on the pages where the tier is the subject: the Benefits catalog, the membership hub, the dues page.

## When not to use

- On the plate: the [Recognition plate](/components/plate/) states the member, and the [Credential card](/components/credential/) carries the badge.
- In a table head: use the 10px tier dot of the comparison [Table](/components/table/).
- For a status label such as “Optional upgrade”: use the card tag of the [Card](/components/card/).
- On the homepage, landing pages and join: those pages name no tiers. Professional Track™ is the only membership name there.

## Rules

- Markup: `<span class="hs-tier-badge hs-tier-badge--gold">Gold</span>`. Use one of `--bronze`, `--silver`, `--gold`, `--signature`, `--free`.
- Write the tier name as text in sentence case. The CSS sets the uppercase.
- The fills come from the `--hs-tier-*` tokens. Free uses `--hs-slate`. Set no colour in markup.
- On a navy ground the Signature edge takes the ground’s line (`--hs-ctx-line`), so the pill stays visible.

## Accessibility

- The text is the tier name, so the colour never carries the meaning alone.
- Labels: white on bronze 5.8:1, on signature 14.7:1, on slate 6.2:1; navy on silver 6.8:1, on gold 8.9:1.
- Silver and gold fills are pale (1.8:1 and 1.4:1 on white). Their 1px inset edge clears 3:1: slate 500 (3.7:1) and gold ink (5.9:1).
- The badge is a static `<span>`: not a link, no focus stop.

## Variants

### All tiers

Free uses slate.

```html
<span class="hs-tier-badge hs-tier-badge--bronze">Bronze</span>
<span class="hs-tier-badge hs-tier-badge--silver">Silver</span>
<span class="hs-tier-badge hs-tier-badge--gold">Gold</span>
<span class="hs-tier-badge hs-tier-badge--signature">Signature</span>
<span class="hs-tier-badge hs-tier-badge--free">Free</span>
```