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.
• The homepage or a landing page: use the Hero.
• An award page: use the Award hero.
• The member’s tier: put the Tier badge in the Credential card.

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”.

Full-width preview: the snippet sets its own ground

Honor Society® member

Avery Example

Nursing student at Example State University

Member since March 2024

<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>