Skip to content
Honor Society®Brand system

v0.6.4

Page structure

Group heading

The title and computed count of one group inside a band, such as a letter in a directory.

Block
.hs-group-head
CSS
components/group-head.css (in /brand.css)
JS
None
Status
Built, open to change
Decided in
Components round 3
Markdown
/components/group-head.md

What it is

The title of one group inside a band (a letter in a directory, an award in a recipient list) with its count. Didot h3 plus a 14px/600 slate count, a 1px line under it; 48px between groups. The count is computed in code.

When to use

  • A directory split by letter, such as the member directory.
  • A recipient list grouped by award.

When not to use

  • A band’s opening heading: use a Heading h2 with --rule.
  • A figure that proves a claim: use the Stat.

Rules

  • Wrap each group in .hs-group and give that wrapper the anchor id.
  • Mark up the head as <h3 class="hs-group-head"> with a .hs-group-head__title span, a space, then a .hs-group-head__count span.
  • Compute the count in code. Never type it: a typed count drifts.
  • Write the count with its noun: “13 members”.
  • Use it inside a band only. There the 1px line ties the group to its items, and the “no rules between bands” ban does not apply.
  • The 48px between groups comes from .hs-group + .hs-group.

Accessibility

  • The head is an h3, so it sits under the band’s h2 in the outline. A screen reader reads it as “A, 13 members”.
  • The count is slate: 6.2:1 on white.
  • base.css gives the group id a scroll-margin-top, so a linked group clears the site header.

Variants

Directory groups

Wrap each group in .hs-group; give it the anchor id.

Preview on soft

<div class="hs-group" id="letter-a">
  <h3 class="hs-group-head"><span class="hs-group-head__title">A</span> <span class="hs-group-head__count">13 members</span></h3>
  <ul class="hs-card-grid hs-card-grid--3">
    <li><a class="hs-card hs-card--link hs-member-card" href="/members/avery-example" data-ph-capture-attribute-cta="member-profile" data-ph-capture-attribute-cta-loc="directory"><img class="hs-avatar hs-avatar--md" src="/placeholders/avatar.svg" width="64" height="64" alt="" loading="lazy"><span class="hs-member-card__body"><span class="hs-member-card__name">Avery Example</span><span class="hs-member-card__meta">Example State University</span></span></a></li>
    <li><a class="hs-card hs-card--link hs-member-card" href="/members/alex-sample" data-ph-capture-attribute-cta="member-profile" data-ph-capture-attribute-cta-loc="directory"><img class="hs-avatar hs-avatar--md" src="/placeholders/avatar.svg" width="64" height="64" alt="" loading="lazy"><span class="hs-member-card__body"><span class="hs-member-card__name">Alex Sample</span><span class="hs-member-card__meta">Sample College</span></span></a></li>
  </ul>
</div>
<div class="hs-group" id="letter-b">
  <h3 class="hs-group-head"><span class="hs-group-head__title">B</span> <span class="hs-group-head__count">2 members</span></h3>
  <ul class="hs-card-grid hs-card-grid--3">
    <li><a class="hs-card hs-card--link hs-member-card" href="/members/blake-placeholder" data-ph-capture-attribute-cta="member-profile" data-ph-capture-attribute-cta-loc="directory"><img class="hs-avatar hs-avatar--md" src="/placeholders/avatar.svg" width="64" height="64" alt="" loading="lazy"><span class="hs-member-card__body"><span class="hs-member-card__name">Blake Placeholder</span><span class="hs-member-card__meta">Placeholder University</span></span></a></li>
  </ul>
</div>