# Member card

> One member or scholarship recipient in a directory, as a horizontal card with avatar, Didot name and meta.

- Block class: `.hs-member-card`
- CSS: `components/member-card.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: Member and recipient, Two links, Row list
- HTML page: https://brand.honorsociety.org/components/member-card/

## What it is

One member in a directory. A horizontal link card: 64px avatar, Didot name, one or two slate meta lines. The whole card is one link. A long list with two routes per member uses the row list instead of cards.

## When to use

- A directory of members, such as the featured members.
- Scholarship recipients on award pages and recipient lists: `--recipient` links to the story.
- A recipient row that needs two routes (the profile and the school page, or the video): `--links` for a short list.
- A long list with two routes per member, about 20+ rows: the row list, `--row` in `ul.hs-member-rows`. For example the 131 recipients on `/scholarship-recipients-all`.

## When not to use

- One person’s full biography: use the [Leader profile](/components/leader/).
- The member’s own page: use the [Recognition plate](/components/plate/).
- The author of an article: use the [Byline](/components/byline/).
- A row of recipient videos: use a [Link list](/components/link-list/) under the grid, or the [Video facade](/components/video/).

## Rules

- Link card form: `<a class="hs-card hs-card--link hs-member-card">`. The whole card is one link; put no second link inside it.
- Row list form: `<ul class="hs-member-rows">` with `<li class="hs-member-card hs-member-card--row">`, the name link, then the second link. No card, no avatar, no eyebrow, no heading per row: the group heading above the list names the group.
- Pick by length: `--links` cards up to about 20 rows, the row list from about 20 rows. Decided: A for short lists, B for long lists ([round 3](/decisions/components-round-3/)).
- `--links` form: a basic card, `<li class="hs-card hs-member-card hs-member-card--links">`, with `.hs-member-card__link` in the name and `.hs-member-card__meta-link` for the second route.
- Keep this order: `.hs-avatar--md`, then `.hs-member-card__body` with the optional eyebrow, `h3.hs-member-card__name` and one or two meta lines. `--recipient` adds `p.hs-member-card__story` after the body.
- Put the cards in `<ul class="hs-card-grid">`. Add `--3` for three columns from 62rem. Load `member-card.css` after `card.css`.
- Every link carries `data-ph-capture-attribute-cta` and `data-ph-capture-attribute-cta-loc` (the band slug).
- Print a card or a row only for a public profile. A link to a private profile fails for visitors.

## Accessibility

- The name is in the card, so the avatar takes `alt=""`, or `aria-hidden="true"` on initials.
- Contrast: name navy 12.4:1; meta slate 6.2:1 (5.9:1 on soft).
- In `--links` and `--row`, each link is at least 40px tall: a full tap target without a stretched link.
- In `--row`, the name link is plain text in a list item, not a heading. 131 headings would flood the outline; the group heading carries the structure.
- Reduced motion: the link transitions are removed.

## Variants

### Member and recipient

`--recipient` adds the award eyebrow and a one-line story, and links to the story.

```html
<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" decoding="async">
      <span class="hs-member-card__body">
        <h3 class="hs-member-card__name">Avery Example</h3>
        <span class="hs-member-card__meta">Nursing</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 hs-member-card--recipient" href="/scholarship-recipient/avery-example" data-ph-capture-attribute-cta="recipient-story" data-ph-capture-attribute-cta-loc="recipients">
      <span class="hs-avatar hs-avatar--initials hs-avatar--md" aria-hidden="true">AE</span>
      <span class="hs-member-card__body">
        <span class="hs-eyebrow">Study Abroad Scholarship</span>
        <h3 class="hs-member-card__name">Avery Example</h3>
        <span class="hs-member-card__meta">Example State University</span>
      </span>
      <p class="hs-member-card__story">Avery describes a sample study program abroad and her plans for a future in teaching.</p>
    </a>
  </li>
</ul>
```

### Two links

`--links`: a basic card whose name and meta line are each a link (name to the profile or story, meta to the school page or the video). Built: A ([round 3](/decisions/components-round-3/)).

```html
<ul class="hs-card-grid hs-card-grid--3">
  <li class="hs-card hs-member-card hs-member-card--links"><img class="hs-avatar hs-avatar--md" src="/placeholders/avatar.svg" width="64" height="64" alt="" loading="lazy"><div class="hs-member-card__body"><span class="hs-eyebrow">Study Abroad Scholarship</span><h3 class="hs-member-card__name"><a class="hs-member-card__link" href="/members/elliot-example" data-ph-capture-attribute-cta="recipient-profile" data-ph-capture-attribute-cta-loc="recipients">Elliot Example</a></h3><a class="hs-member-card__meta-link" href="/university/placeholder-university" data-ph-capture-attribute-cta="university" data-ph-capture-attribute-cta-loc="recipients">Placeholder University</a></div></li>
  <li class="hs-card hs-member-card hs-member-card--links"><img class="hs-avatar hs-avatar--md" src="/placeholders/avatar.svg" width="64" height="64" alt="" loading="lazy"><div class="hs-member-card__body"><span class="hs-eyebrow">Study Abroad Scholarship</span><h3 class="hs-member-card__name"><a class="hs-member-card__link" href="/scholarship-recipient/jamie-sample-study-abroad-scholarship-recipient" data-ph-capture-attribute-cta="recipient-profile" data-ph-capture-attribute-cta-loc="recipients">Jamie Sample</a></h3><a class="hs-member-card__meta-link" href="https://www.youtube.com/watch?v=VIDEO_ID_11" data-ph-capture-attribute-cta="youtube" data-ph-capture-attribute-cta-loc="recipients">Watch Jamie on YouTube</a></div></li>
</ul>
```

### Row list

`--row` in `ul.hs-member-rows`: one row per member, the name left and the second link right. Use it for long lists, about 20+ rows. Decided: B for long lists ([round 3](/decisions/components-round-3/)).

```html
<ul class="hs-member-rows">
  <li class="hs-member-card hs-member-card--row"><a class="hs-member-card__link" href="/members/elliot-example" data-ph-capture-attribute-cta="recipient-profile" data-ph-capture-attribute-cta-loc="recipients">Elliot Example</a><a class="hs-member-card__meta-link" href="/university/placeholder-university" data-ph-capture-attribute-cta="university" data-ph-capture-attribute-cta-loc="recipients">Placeholder University</a></li>
  <li class="hs-member-card hs-member-card--row"><a class="hs-member-card__link" href="/members/jamie-sample" data-ph-capture-attribute-cta="recipient-profile" data-ph-capture-attribute-cta-loc="recipients">Jamie Sample</a><a class="hs-member-card__meta-link" href="/university/example-college" data-ph-capture-attribute-cta="university" data-ph-capture-attribute-cta-loc="recipients">Example College</a></li>
  <li class="hs-member-card hs-member-card--row"><a class="hs-member-card__link" href="/members/casey-placeholder" data-ph-capture-attribute-cta="recipient-profile" data-ph-capture-attribute-cta-loc="recipients">Casey Placeholder</a><a class="hs-member-card__meta-link" href="/university/sample-university" data-ph-capture-attribute-cta="university" data-ph-capture-attribute-cta-loc="recipients">Sample University</a></li>
</ul>
```