# Recognition plate

> The cream recognition band that opens a member page, with the member’s name as the page H1.

- Block class: `.hs-plate`
- CSS: `components/plate.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: Plate with photo
- HTML page: https://brand.honorsociety.org/components/plate/

## What it is

The cream band that opens a member page. Didot 700 name at the H1 size, pressed into the plate (letterpress tokens), with the honor-gold rule. No tier badge on the plate: the tier goes in the credential card.

## When to use

- Use it as the first band of a member page: the member profile and the membership hub.
- Use it when the page H1 is one member’s name.
- Add `.hs-plate--aside` when a tier ladder or a credential summary sits on the right from 62rem.

## When not to use

- A page that is not about one member: use the [Page head](/components/page-head/).
- The homepage or a landing page: use the [Hero](/components/hero/).
- An award page: use the [Award hero](/components/award-hero/).
- The member’s tier: put the [Tier badge](/components/tier-badge/) in the [Credential card](/components/credential/).

## Rules

- Compose it on a band: `class="hs-band hs-band--plate hs-plate"`. Add `hs-band--bleed` inside a page column.
- Load `plate.css` after `band.css`. Both selectors are (0,1,0), so source order sets the padding.
- Keep this order: optional `.hs-avatar--lg`, `.hs-eyebrow`, `h1.hs-plate__name`, optional `.hs-plate__headline`, `.hs-plate__since`.
- The CSS draws the rule under the name in `--hs-honor-gold`. Write no rule markup, and never use action gold here.
- Keep the tier badge off the plate. The plate states the member; the credential card states the tier.
- Use the plate ground (`--hs-plate`) and the letterpress shadows for recognition bands only.

## Accessibility

- The name is the page’s one `h1`. The band is a `<header>`.
- The avatar takes `alt=""`: the name is right next to it. Initials take `aria-hidden="true"`.
- Contrast: navy on plate 11.3:1, plate muted 5.4:1 (the “Member since” label), gold ink 5.4:1 (the eyebrow).
- Cream on white is 1.05:1, so the plate draws its own 1px `--hs-plate-line` edge at the bottom.
- A long name wraps at any character (`overflow-wrap: anywhere`), so it never scrolls the page sideways.

## Variants

### Plate with photo

Avatar `--lg`, eyebrow in gold ink, the name as the page H1, headline, “Member since”.

```html
<header class="hs-band hs-band--plate hs-plate" data-section="identity">
  <div class="hs-container hs-plate__inner">
    <div class="hs-plate__identity">
      <img class="hs-avatar hs-avatar--lg" src="/placeholders/avatar.svg" width="184" height="184" alt="">
      <div class="hs-plate__text">
        <p class="hs-eyebrow">Honor Society&reg; member</p>
        <h1 class="hs-plate__name">Avery Example</h1>
        <p class="hs-plate__headline">Nursing student <span class="hs-plate__at">at Example State University</span></p>
        <p class="hs-plate__since"><span class="hs-plate__since-label">Member since</span> <span class="hs-plate__since-date">March 2024</span></p>
      </div>
    </div>
  </div>
</header>
```