Avatar

All components Component Brickwork 4.3.1

Try it

Initials fallback

Open full-page preview

A compact named fallback.

Use wherever a person needs a compact visual identity, including bylines and people lists.

Use it

This code creates the configuration shown above. Copy the template and the required Python context together.

{% include "brickwork/components/_avatar.html" with initials=initials aria_label=aria_label size=size %}

context = {'initials': 'AL', 'aria_label': 'Ada Lovelace', 'size': 'sm'}

Guide

Choose an image with meaningful alternative text, or initials with an accessible name.
Include the partial with the selected shape and size.

Options

Option	Type	Default	Required	Description
size	str	md	No	Fixed avatar scale. Allowed: sm, md, lg. Constraint: Use one of the documented size choices; unsupported values are not a responsive substitute.
shape	str	circle	No	Corner treatment. Allowed: circle, square. Constraint: Allowed values: `circle`, `square`.
src	str	Not set	No	Image URL. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component.
alt	str	Not set	No	Required image alternative when `src` is present. Constraint: Use a person name for content images.
initials	str	Not set	No	Fallback glyphs when no source exists. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component.
aria_label	str	initials	No	Accessible name for the initials fallback. Constraint: Use a concise non-empty accessible name whenever the visible label does not name the control.

Behaviour

Accessibility: Images use `alt`; initials use `role="img"` and an accessible name.
Responsive: Size is fixed rather than viewport-driven.
Without JavaScript: Static HTML only.

Need help?

Give a content image a meaningful `alt`; use an empty alternative only when the avatar is decorative.

Explore next