# Group heading > The title and computed count of one group inside a band, such as a letter in a directory. - Block class: `.hs-group-head` - CSS: `components/group-head.css` (also inside https://brand.honorsociety.org/brand.css) - JS: none - Status: built, open to change - Decision record: https://brand.honorsociety.org/decisions/components-round-3.html - Variants: Directory groups - HTML page: https://brand.honorsociety.org/components/group-head/ ## 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](/components/heading/) h2 with `--rule`. - A figure that proves a claim: use the [Stat](/components/stat/). ## Rules - Wrap each group in `.hs-group` and give that wrapper the anchor `id`. - Mark up the head as `

` 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`. ```html

A 13 members

B 2 members

```