Avatar

2026.08.18 Content

An avatar is a small circular thumbnail or initials fallback that identifies a recommendation author. It is driven by each record’s image and name fields in data/recommendations.yml; it is not a general-purpose account control or authoring API.

Peter Marinelli

When to use#

In a recommendation attribution, beside the author’s name and profile information
When the source data supplies a local profile image; otherwise the component derives a two-letter initials fallback from the adjacent name
Not as a control — an avatar identifies, it does not navigate or open menus

Implementation#

- id: "660062653"
  name: Peter Marinelli
  image: /images/linkedin/02-peter-marinelli.jpg

When image is empty, the component shows PM instead. The name still appears in the attribution.

{{ partial "avatar.html" (dict "name" $entry.name "src" $entry.image "class" "avatar-recommendation") }}

<img class="avatar avatar-recommendation" src="/images/linkedin/02-peter-marinelli.jpg" alt="" loading="lazy" />

<span class="avatar avatar-fallback avatar-recommendation" aria-hidden="true">PM</span>

layouts/partials/avatar.html receives a name and optional image path. It renders a lazy-loaded decorative image when the image exists; otherwise it derives up to two initials from the name. Both recommendation layouts call the same partial. The component tokens component.avatar.* govern its size, fallback surface, foreground, and border.

Options#

Option	Purpose
`name`	Required adjacent identity text and source for a missing-image initials fallback
`src`	Optional local image path from the recommendation record
`class`	Optional context class; `avatar-recommendation` names the current presentation

Interface manifest

Kind: Component
Category: Content
Status: Implemented
Implementation: Partial:layouts/partials/avatar.htmlLayout:layouts/about/recommendations.htmllayouts/blog/recommendations.htmlData:data/recommendations.ymlCSS:assets/css/site.cssConfiguration:tokens/core.tokens.json

Accessibility#

The avatar does not take focus and does not act as a control.
The image has empty alt; the initials fallback is aria-hidden. Both are presentational because the person’s name appears in the adjacent figcaption.
The person’s name must appear as adjacent text; identity must never be conveyed by the image or initials alone.
An image failure must not remove the adjacent text. The data field may be corrected independently of the layout.