Avatar

What it is

A member’s photo or initials in a circle. Three sizes: 40px (header, bylines, feed rows), 64px --md (cards), and 112–184px --lg, fluid (the plate).

When to use

• Default 40px: the header, bylines, article cards and feed rows.
• --md 64px: member cards, recipient cards and the author card.
• --lg 112–184px: the plate on the profile and the hub.
• --initials: a member with no photo, at any size.

When not to use

• A leadership portrait: use the 4:5 rectangle of the Leader profile.
• Member photos in regalia in a marketing band: use a rectangular Figure. House style bans circular crops there.

Rules

• Use three sizes only. Fold 44 and 48px into the default 40px; fold 80 and 88px into --md.
• Photo: <img class="hs-avatar" width height alt>. Set width and height to the size (40, 64 or 184).
• Initials: <span class="hs-avatar hs-avatar--initials" role="img" aria-label="Name">.
• The default medallion takes .hs-avatar--default: it has transparent corners, so it drops the ring and the ground.
• On navy, add no modifier. The ring and the ground read the band context.
• Below the hero, add loading="lazy" decoding="async" to the <img>.

Accessibility

• When the member’s name is next to the avatar as text, give the photo alt="". Give initials aria-hidden="true" there.
• When the avatar stands alone, the alt or the aria-label names the member.
• Initials are navy on plate: 11.3:1.
• Inside a link, the link text carries the name; the avatar adds nothing to it.

Variants

Sizes and initials

Initials are navy on plate. A decorative avatar next to the name takes alt="".