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. The eyebrow only labels it.
• A tier name: use the Tier badge.
• The label of “On this page” links: the 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.

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

On navy

Action gold, 10.5:1.

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

On plate

Gold ink, 5.4:1.

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