# Avatar

> A member’s photo or initials in a circle, in three sizes: 40px, 64px and a fluid 112–184px.

- Block class: `.hs-avatar`
- CSS: `components/avatar.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: Sizes and initials
- HTML page: https://brand.honorsociety.org/components/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](/components/leader/).
- Member photos in regalia in a marketing band: use a rectangular [Figure](/components/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=""`.

```html
<img class="hs-avatar" src="/placeholders/avatar.svg" width="40" height="40" alt="Avery Example">
<img class="hs-avatar hs-avatar--md" src="/placeholders/avatar.svg" width="64" height="64" alt="">
<span class="hs-avatar hs-avatar--initials hs-avatar--md" role="img" aria-label="Avery Example">AE</span>
<img class="hs-avatar hs-avatar--lg" src="/placeholders/avatar.svg" width="184" height="184" alt="Avery Example">
```