# Eyebrow

> A short uppercase label above a heading; the ground sets its colour.

- Block class: `.hs-eyebrow`
- CSS: `components/eyebrow.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: none
- Status: decided
- Decision record: https://brand.honorsociety.org/decisions/components-round-1.html
- Variants: On light, On navy, On plate
- HTML page: https://brand.honorsociety.org/components/eyebrow/

## What it is

A short label above a heading. Write it in sentence case; CSS uppercases it. 13px, 600, 0.12em. The colour follows the ground.

## When to use

- Above the H1 of a page head, above a band’s opening h2, and above the h2 of a CTA band.
- On a plate, above the member’s name.
- At the top of a light panel, such as “Next deadline” in the award hero card.

## When not to use

- The heading of a band: write a [Heading](/components/heading/). The eyebrow only labels it.
- A tier name: use the [Tier badge](/components/tier-badge/).
- The label of “On this page” links: the [Anchor nav](/components/anchor-nav/) has its own `__label`.

## Rules

- Write it in sentence case. CSS uppercases it.
- Put it directly above the heading it labels, as `<p class="hs-eyebrow">`.
- Keep it to a short label, not a sentence.
- Use no colour modifier. The ground sets `--hs-ctx-eyebrow`: slate on white and soft, action gold on navy, gold ink on plate.
- Keep gold ink on recognition grounds. On white it reads as an honor mark.

## Accessibility

- CSS uppercases the text, so a screen reader says words, not letters.
- Contrast: slate 6.2:1 on white and 5.9:1 on soft; action gold 10.5:1 on flat navy and 6.8:1 at the navy gradient’s lightest corner; gold ink 5.4:1 on plate.
- A `<p>` keeps the label out of the heading outline.

## Variants

### On light

Slate, 6.2:1.

```html
<p class="hs-eyebrow">Participation tiers</p>
```

### On navy

Action gold, 10.5:1.

```html
<p class="hs-eyebrow">Beyond recognition</p>
```

### On plate

Gold ink, 5.4:1.

```html
<p class="hs-eyebrow">Member recognition</p>
```