Avatar
Avatars are are typically used to display a user profile as a picture or short text. They can be used in various contexts, such as in lists, groups, or as buttons.
On this page
How it works
Use the .avatar class to create an avatar. The .avatar-image class is used for images, while .avatar-text is used for text.
<span class="avatar">
<span class="avatar-image"><img src="https://i.pravatar.cc/256" alt="Profile picture" /></span>
</span>
<span class="avatar">
<span class="avatar-text">CX</span>
</span>Sizes
Use the .small or .large classes to set the size of the avatar. You can also use the --cx-avatar-size CSS variable to set a custom size.
<span class="avatar large">
<span class="avatar-image"><img src="https://i.pravatar.cc/256" alt="Profile picture" /></span>
</span>
<span class="avatar large">
<span class="avatar-text">CX</span>
</span>
<span class="avatar small">
<span class="avatar-image"><img src="https://i.pravatar.cc/256" alt="Profile picture" /></span>
</span>
<span class="avatar small">
<span class="avatar-text">CX</span>
</span>
<span class="vr mx-medium"></span>
<span class="avatar" style="--cx-avatar-size: 2rem;">
<span class="avatar-image"><img src="https://i.pravatar.cc/256" alt="Profile picture" /></span>
</span>
<span class="avatar" style="--cx-avatar-size: 2rem;">
<span class="avatar-text">CX</span>
</span>Buttons
Use the button tag with .button class to create an avatar button.
<button type="button" class="button avatar">
<span class="avatar-image"><img src="https://i.pravatar.cc/256" alt="Profile picture" /></span>
</button>
<button type="button" class="button avatar">
<span class="avatar-text">CX</span>
</button>Links
Use the anchor tag with .avatar class to create an avatar link.
<a class="avatar" href="#">
<span class="avatar-image"><img src="https://i.pravatar.cc/256" alt="Profile picture" /></span>
</a>
<a class="avatar" href="#">
<span class="avatar-text">CX</span>
</a>Colors
Use with a context color class to create an avatar with a background color.
CX
CX
CX
CX
CX
CX
CX
CX
CX
CX
CX
<span class="avatar default">
<span class="avatar-text">CX</span>
</span>
<span class="avatar alternate">
<span class="avatar-text">CX</span>
</span>
<span class="avatar primary">
<span class="avatar-text">CX</span>
</span>
<span class="avatar secondary">
<span class="avatar-text">CX</span>
</span>
<span class="avatar neutral">
<span class="avatar-text">CX</span>
</span>
<span class="avatar danger">
<span class="avatar-text">CX</span>
</span>
<span class="avatar success">
<span class="avatar-text">CX</span>
</span>
<span class="avatar warning">
<span class="avatar-text">CX</span>
</span>
<span class="avatar info">
<span class="avatar-text">CX</span>
</span>
<span class="avatar black">
<span class="avatar-text">CX</span>
</span>
<span class="avatar white">
<span class="avatar-text">CX</span>
</span><button type="button" class="button avatar default">
<span class="avatar-text">CX</span>
</button>
<button type="button" class="button avatar alternate">
<span class="avatar-text">CX</span>
</button>
<button type="button" class="button avatar primary">
<span class="avatar-text">CX</span>
</button>
<button type="button" class="button avatar secondary">
<span class="avatar-text">CX</span>
</button>
<button type="button" class="button avatar neutral">
<span class="avatar-text">CX</span>
</button>
<button type="button" class="button avatar danger">
<span class="avatar-text">CX</span>
</button>
<button type="button" class="button avatar success">
<span class="avatar-text">CX</span>
</button>
<button type="button" class="button avatar warning">
<span class="avatar-text">CX</span>
</button>
<button type="button" class="button avatar info">
<span class="avatar-text">CX</span>
</button>
<button type="button" class="button avatar black">
<span class="avatar-text">CX</span>
</button>
<button type="button" class="button avatar white">
<span class="avatar-text">CX</span>
</button>Badges
Use the .badge class to create a badge on top of the avatar. Use position utilities to position the badge.
<a class="avatar" href="#">
<span class="avatar-text">CX</span>
<span class="badge primary circle top-100 start-100 translate-middle"><span class="visually-hidden"></span></span>
</a>
<a class="avatar" href="#">
<span class="avatar-text">CX</span>
<span class="badge primary circle top-100 start-100 translate-middle">24</span>
</a>
<a class="avatar" href="#">
<span class="avatar-text">CX</span>
<span class="badge primary top-100 start-100 translate-middle">new</span>
</a>Groups
Use the .avatar-group class to create a group of avatars. Use the .avatar class for each avatar in the group. Set the --cx-avatar-overlap CSS variable to set the overlap of the avatars.
<div class="avatar-group">
<button type="button" class="button avatar">
<span class="avatar-image"><img src="https://i.pravatar.cc/256?img=27" alt="Profile picture" /></span>
</button>
<button type="button" class="button avatar">
<span class="avatar-image"><img src="https://i.pravatar.cc/256?img=56" alt="Profile picture" /></span>
</button>
<button type="button" class="button avatar">
<span class="avatar-image"><img src="https://i.pravatar.cc/256?img=35" alt="Profile picture" /></span>
</button>
<button type="button" class="button avatar">
<span class="avatar-image"><img src="https://i.pravatar.cc/256?img=40" alt="Profile picture" /></span>
</button>
<button type="button" class="button avatar">
<span class="avatar-image"><img src="https://i.pravatar.cc/256?img=10" alt="Profile picture" /></span>
</button>
<button type="button" class="button avatar">
<span class="avatar-image"><img src="https://i.pravatar.cc/256?img=7" alt="Profile picture" /></span>
</button>
<button type="button" class="button avatar">
<span class="avatar-image"><img src="https://i.pravatar.cc/256?img=21" alt="Profile picture" /></span>
</button>
<button type="button" class="button avatar">
<span class="avatar-image"><img src="https://i.pravatar.cc/256?img=40" alt="Profile picture" /></span>
</button>
<button type="button" class="button avatar">
<span class="avatar-image"><img src="https://i.pravatar.cc/256?img=35" alt="Profile picture" /></span>
</button>
</div>