Use .avatar to represent a person, team, account, or automated actor in a compact space. Bootstrap does not provide a native avatar component, so Moo UI keeps the shape as a documented extension while relying on ordinary image behavior: real photos render through an img element, stay constrained by the avatar container, and need meaningful alt text when the image identifies the subject.
Render the image and initials fallback together so the fallback is ready when media fails or no image exists. Keep initials short, use an accessible name for fallback-only avatars, and avoid putting job titles or long status text inside the avatar itself; place that supporting copy next to the avatar where it can wrap normally.
Attach small status badges to the avatar edge only when they add immediate meaning, and give dot or icon badges an accessible label. For avatar groups, keep the visible stack short, preserve each avatar's name, and add a count chip when the group hides additional people.