Avatars

On this page

# Intro

Avatars are used to display user profile images or initials with optional online presences. Initials can be used with the data-initial attribute.

Avatar
<div class="avatar">
	<img src="/images/avatar.png">
</div>
<div class="avatar" data-initial="LS"></div>

# Colors

Avatars have color modifiers available with -primary, -success, -warning, -danger, -dark, and -light. Colors will only work with initials and will be hidden if an image is used.

<div class="avatar -primary" data-initial="LS"></div>

# Sizing

You can change the size of avatars by using the -small, -normal, -medium, -large modifiers.

<div class="avatar -small" data-initial="SM">
	<i class="presence"></i>
</div>

# Presence

You can add a status to an avatar by using the presence element. Presences have color modifiers available.

<div class="avatar" data-initial="LS">
	<i class="presence"></i>
</div>
<div class="avatar" data-initial="LS">
	<i class="presence -primary"></i>
</div>