avatar
Use .avatar with a native image or authored fallback, plus an optional badge.
Place adjacent avatars and a native output in one wrapper to form a group.
<span class="avatar" aria-label="Jane Doe">
<span>JD</span>
<output></output>
</span>
<span>
<span class="avatar"><img src="avatar.jpg" alt="Alex Brown" /></span>
<output>+3</output>
</span>
Example
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Avatar</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body
ng-app="angular.css"
ng-cloak
data-example="avatar-badge avatar-basic avatar-demo avatar-group avatar-group-count"
>
<div class="visual-example">
<span class="avatar">
<img
class="avatar-grayscale"
src="../../images/avatars/01.png"
alt="Profile portrait"
/>
<span>CN</span>
</span>
<span class="avatar">
<img src="../../images/avatars/02.png" alt="Profile portrait" />
<span>ER</span>
<output variant="success"></output>
</span>
<span class="avatar" aria-label="Jane Doe">
<span>JD</span>
</span>
<span class="avatar-grayscale">
<span class="avatar">
<img src="../../images/avatars/01.png" alt="Profile portrait" />
<span>CN</span>
</span>
<span class="avatar">
<img src="../../images/avatars/03.png" alt="Profile portrait" />
<span>LR</span>
</span>
<span class="avatar">
<img src="../../images/avatars/04.png" alt="Profile portrait" />
<span>ER</span>
</span>
<output>+3</output>
</span>
</div>
</body>
</html>
Variants And Composition
Use size="sm", the default size, or size="lg". Badge icons, grouped counts,
RTL layouts, and dropdown triggers compose from the same semantic parts without
changing Avatar behavior.
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Avatar Workflows</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body
ng-app="angular.css"
ng-cloak
ng-init="avatarAction = 'None'"
data-example="avatar-badge-icon avatar-dropdown avatar-group-count-icon avatar-rtl avatar-size"
>
<main class="avatar-workflows">
<section
class="avatar-workflow-section"
aria-labelledby="avatar-badge-heading"
>
<h2 id="avatar-badge-heading">Badge icon</h2>
<div class="avatar-workflow-row" aria-label="Avatar badge icon">
<span class="avatar">
<img
class="avatar-grayscale"
src="../../images/avatars/02.png"
alt="@pranathip"
/>
<span>PP</span>
<output>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
aria-hidden="true"
>
<path d="M5 12h14" />
<path d="M12 5v14" />
</svg>
</output>
</span>
</div>
</section>
<section
class="avatar-workflow-section"
aria-labelledby="avatar-count-heading"
>
<h2 id="avatar-count-heading">Group count icon</h2>
<div class="avatar-grayscale" aria-label="Avatar group count icon">
<span class="avatar">
<img src="../../images/avatars/01.png" alt="@angularcss" />
<span>CN</span>
</span>
<span class="avatar">
<img src="../../images/avatars/03.png" alt="@maxleiter" />
<span>LR</span>
</span>
<span class="avatar">
<img src="../../images/avatars/04.png" alt="@evilrabbit" />
<span>ER</span>
</span>
<output>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
aria-hidden="true"
>
<path d="M5 12h14" />
<path d="M12 5v14" />
</svg>
</output>
</div>
</section>
<section
class="avatar-workflow-section"
aria-labelledby="avatar-size-heading"
>
<h2 id="avatar-size-heading">Sizes</h2>
<div
class="avatar-workflow-row avatar-grayscale"
aria-label="Avatar sizes"
>
<span size="sm" class="avatar">
<img src="../../images/avatars/01.png" alt="@angularcss small" />
<span>CN</span>
</span>
<span class="avatar">
<img src="../../images/avatars/01.png" alt="@angularcss default" />
<span>CN</span>
</span>
<span size="lg" class="avatar">
<img src="../../images/avatars/01.png" alt="@angularcss large" />
<span>CN</span>
</span>
</div>
</section>
<section
class="avatar-workflow-section avatar-dropdown-stage"
aria-labelledby="avatar-menu-heading"
>
<h2 id="avatar-menu-heading">Dropdown</h2>
<div ng-dropdown-menu>
<button
type="button"
variant="ghost"
size="icon"
class="avatar-dropdown-trigger"
aria-label="Open user menu"
>
<span class="avatar">
<img src="../../images/avatars/01.png" alt="AngularCSS" />
<span>CN</span>
</span>
</button>
<menu style="--menu-width: 8rem">
<section>
<button ng-click="avatarAction = 'Profile'">Profile</button>
<button ng-click="avatarAction = 'Billing'">Billing</button>
<button ng-click="avatarAction = 'Settings'">Settings</button>
</section>
<hr />
<section>
<button variant="destructive" ng-click="avatarAction = 'Log out'">
Log out
</button>
</section>
</menu>
</div>
<output class="avatar-workflow-output">
Selected: {{ avatarAction }}
</output>
</section>
<section
class="avatar-workflow-section avatar-workflow-wide"
aria-labelledby="avatar-rtl-heading"
dir="rtl"
lang="ar"
>
<h2 id="avatar-rtl-heading">اتجاه من اليمين إلى اليسار</h2>
<div
class="avatar-workflow-row avatar-rtl-demo"
aria-label="صور رمزية من اليمين إلى اليسار"
>
<span class="avatar">
<img
class="avatar-grayscale"
src="../../images/avatars/01.png"
alt="@angularcss"
/>
<span>CN</span>
</span>
<span class="avatar-rtl-badge avatar">
<img src="../../images/avatars/04.png" alt="@evilrabbit" />
<span>ER</span>
<output variant="success"></output>
</span>
<span class="avatar-grayscale">
<span class="avatar">
<img src="../../images/avatars/01.png" alt="@angularcss" />
<span>CN</span>
</span>
<span class="avatar">
<img src="../../images/avatars/03.png" alt="@maxleiter" />
<span>LR</span>
</span>
<span class="avatar">
<img src="../../images/avatars/04.png" alt="@evilrabbit" />
<span>ER</span>
</span>
<output>+٣</output>
</span>
</div>
</section>
</main>
</body>
</html>
Installation
Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or angular.css module dependency. Add AngularTS when using application bindings such as ng-model or ng-click. See Installation for the complete setup.
This entry uses native HTML and CSS. AngularCSS registers no runtime directive for it. Native image and fallback composition.
Anatomy
Root styling selector
.avatar
Semantic structure
Apply .avatar to a wrapper containing either an image or authored fallback content. Badges are optional. Place adjacent avatars and a native output for the remaining count in one div or span; AngularCSS recognizes that group from its structure.
API
Attributes and state
| Attribute | Access | Purpose |
|---|---|---|
size | Authored | Avatar size: sm or lg; omit for the default size. |
variant | Authored | Optional direct output badge status: success; omit for the primary status color. |
Attributes remain authored HTML, native state, or AngularTS inputs. AngularCSS does not write element state.
CSS custom properties
This styling hook does not define component-specific CSS custom properties.
DOM events
This component does not emit a component-specific custom event.
Native DOM events continue to work normally. AngularTS event directives such as
ng-click and ng-keydown, plus the data-change model callback, remain application-owned.
Behavior
Avatar is a styling-only authored HTML pattern. Native img loading and alternative text remain browser behavior; use a fallback-only avatar when no image is available, or AngularTS structural directives when application state chooses between sources.
AngularCSS does not replace AngularTS interpolation, bindings, structural directives, form controllers, validation, or application state.
Accessibility
Give meaningful portrait images useful alternative text. Give fallback-only avatars an accessible name when initials are ambiguous, and keep decorative status badges out of repeated announcements.
Authored accessible names and relationships are preserved. Test the final composition with keyboard navigation and assistive technology because labels and content come from the application.
Customization
Target semantic elements, native state selectors, and component classes with ordinary CSS. Behavior and accessible state remain with native HTML and AngularTS; visual choices belong in the application stylesheet.
Read Customization for layer order, design tokens, state variants, and iframe demo isolation.
Feedback
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.