Avatar | CAAT Design System — Component Contract

Live Demo

Types

Rendered

Photo Initials Icon

Sizes

Rendered

sm 36px · md 48px · lg 64px

1. Summary

Component name	Avatar
AEM resource type	`caat/components/avatar`
Tier	Base (atom) — composes nothing but tokens
Purpose	Represent a person with a photo, or fall back to initials / a generic icon.
Variants	Photo · Initials · Icon · sm · md · lg
Status	New
Replaces	`.caat-testimonial__avatar` (Testimonials-internal)

Used by

Testimonials — member photo / initials.
Future: member portal header, advisor cards, comment threads.

2. Design Tokens

Token	Role
`--caat-color-border`	Photo placeholder background (while loading)
`--caat-color-bg-brand` / `--caat-color-text-inverse`	Initials & icon fallback fill + glyph
`--caat-font-primary`	Initials

3. Authoring Fields

Field	Type	Required	Notes
Image	Image	No	Headshot; if empty, falls back to initials or icon
Name	Text	Yes	Used for alt text and to derive initials
Size	Select	No	sm · md (default) · lg

4. Validation Rules

No author-managed content beyond an accessible label, so there are no authoring validation rules. Accessibility requirements are covered in Section 8 (Accessibility).

5. Content Guidance

Prefer a real photo; use initials when none exists; use the icon only as a last resort (anonymous).
Initials = first letters of given + family name, uppercase, max 2 characters.
Keep avatars consistent in size within a single context (e.g. a testimonial grid).

6. Semantic HTML

<!-- Photo (meaningful → real alt) -->
<img class="caat-avatar" src="…" alt="Margaret Chen" width="48" height="48">

<!-- Initials / icon fallback (decorative → aria-hidden; name shown nearby) -->
<span class="caat-avatar caat-avatar--initials" aria-hidden="true">MC</span>
<span class="caat-avatar caat-avatar--icon" aria-hidden="true"><i class="bi bi-person-fill"></i></span>

7. CSS Contract

Selector	Purpose
`.caat-avatar`	Base — 48px circle (photo or fallback)
`.caat-avatar--initials` / `--icon`	Brand-fill fallbacks
`.caat-avatar--sm` / `--lg`	36px / 64px

8. Accessibility

Requirement	Implementation
Photo alt	Meaningful photo uses the person's name as `alt`.
Fallbacks	Initials/icon are `aria-hidden="true"` — the name is conveyed by adjacent text (e.g. testimonial name), so the avatar isn't announced twice.
Contrast	White initials/glyph on brand navy fill — AA verified.
Not interactive	Decorative by default; if it links to a profile, wrap in a real link.

9. SEO

Transient / structural UI with no indexable content of its own — no SEO markup required. Ensure any content this component wraps or reveals stays server-rendered and crawlable.

10. Analytics

Analytics are captured through the shared data-analytics-component attribute on the component root (emitted automatically) and reported to the central data layer. Event names and payloads follow the organisation's standard analytics schema — defined centrally with the analytics team, not invented per component — so no bespoke tracking is specified here.

11. AEM Implementation Notes

Resource type: caat/components/avatar.
Sling model derives initials from name when no image is set; chooses the icon fallback if neither.

12. Dialog Model (cq:dialog)

Not authored directly. The avatar is a sub-element emitted and configured by its host component (or generated from page structure), so it has no standalone cq:dialog — any options are exposed through the host component's dialog.

13. QA Checklist

#	Check	Pass?
1	Photo, initials, and icon all render as 48px circles
2	Photo has name alt; fallbacks are aria-hidden
3	Sizes sm/md/lg correct
4	Initials/icon white on navy meet AA

14. Definition of Done

Token-driven; fallbacks AA verified.
Testimonials refactored to consume it (was .caat-testimonial__avatar).
Alt/aria behaviour verified.
QA checklist signed off.