# Heading

> Didot 700 headings at the h1, h2 and h3 steps, with an optional gold or honor rule.

- Block class: `.hs-heading`
- CSS: `components/heading.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: H1 with gold rule, H2 with gold rule, eyebrow and lead, H2 centred, H2 on navy, H3, Honor rule
- HTML page: https://brand.honorsociety.org/components/heading/

## What it is

Didot 700. The size class (`--h1`, `--h2`, `--h3`) is separate from the element, so the outline stays correct. `--rule` adds the 56×4 bar under a page H1 or a band’s opening H2.

## When to use

- The H1 of a page head, with `--rule`.
- A band’s opening h2 in `.hs-band__head`, with `--rule`.
- An h3 inside a band, with no rule.
- A member’s name or a credential on a recognition ground, with `--honor`.

## When not to use

- A separator between bands: change the ground of the [Band](/components/band/). The rule is a brand mark, not a separator.
- The title of a group with a count, such as a directory letter: use the [Group heading](/components/group-head/).
- A figure that proves a claim: use the [Stat](/components/stat/).
- The label above a heading: use the [Eyebrow](/components/eyebrow/).

## Rules

- Pick the element for the outline, then the size class for the look. A band opens with an h2, even where it looks like an h1. Use h3 only inside a band.
- Use `--rule` only under a page head H1 or a band’s opening h2. The titles of the hero, the CTA band and the award hero take no rule: the gold button is the accent there.
- Use `--honor` for recognition only (member names, credentials), and always with `--rule`. On a plate band the rule is honor gold without the modifier.
- Use no colour modifier. The ground sets the colour: navy on light, white on navy. Keep the weight at 700: Didot has one bold cut.
- Write ® and ™ as the plain character (`&reg;`, `&trade;`), in headings and body text alike. Never wrap them in `<sup>`. The plain glyph keeps the type’s own size and weight.
- Put the one paragraph under a heading in `.hs-lead`.

## Accessibility

- The size class is separate from the element, so the document outline stays correct.
- The rule is an `::after` pseudo-element. A screen reader does not read it.
- Navy on white is 12.4:1. On navy the heading is white.

## Variants

### H1 with gold rule

The page head H1.

```html
<h1 class="hs-heading hs-heading--h1 hs-heading--rule">Honor Society&reg; Membership Tiers</h1>
```

### H2 with gold rule, eyebrow and lead

A band’s opening head.

```html
<p class="hs-eyebrow">Free to join</p>
<h2 class="hs-heading hs-heading--h2 hs-heading--rule">Turn your achievement into opportunity.</h2>
<p class="hs-lead">Membership is free. Professional Track&trade; is an optional upgrade.</p>
```

### H2 centred

For a band whose content is centred (tier cards).

```html
<h2 class="hs-heading hs-heading--h2 hs-heading--rule hs-heading--center">Honor Your Ambition&trade;</h2>
```

### H2 on navy

No modifier: white heading, gold rule.

```html
<h2 class="hs-heading hs-heading--h2 hs-heading--rule">Support that comes with membership.</h2>
```

### H3

Inside a band only. No rule.

```html
<h3 class="hs-heading hs-heading--h3">Mentorship</h3>
```

### Honor rule

Recognition only: a member’s name, a credential. `--honor` needs `--rule`. On a plate band the rule is honor gold without the modifier. The name is a sample.

```html
<p class="hs-eyebrow">Honor Society&reg; member</p>
<h1 class="hs-heading hs-heading--h1 hs-heading--rule hs-heading--honor">Avery Example</h1>
```