Recognition and people

Member card

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

Block: .hs-member-card
CSS: components/member-card.css (in /brand.css)
JS: None
Status: Decided
Decided in: Components round 2a
Markdown: /components/member-card.md

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.
The member’s own page: use the Recognition plate.
The author of an article: use the Byline.
A row of recipient videos: use a Link list under the grid, or the Video facade.

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

Preview on soft

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

Preview on soft

Study Abroad Scholarship
Elliot Example
Placeholder University
Study Abroad Scholarship
Jamie Sample
Watch Jamie on YouTube

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

Preview on soft

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