Avatar Component

Avatar Component

Axiom01's avatar component is used to display a user's profile picture, initials, or a generic icon. It comes in various sizes and can be easily customized to fit your application's design.

Image Avatars

<div class="avatar small"><img src="path/to/avatar.jpg" alt="User Avatar"></div>
<div class="avatar medium"><img src="path/to/avatar.jpg" alt="User Avatar"></div>
<div class="avatar large"><img src="path/to/avatar.jpg" alt="User Avatar"></div>
<div class="avatar xlarge"><img src="path/to/avatar.jpg" alt="User Avatar"></div>

Text Avatars (Initials)

<div class="avatar small">JD</div>
<div class="avatar medium">JD</div>
<div class="avatar large">JD</div>
<div class="avatar xlarge">JD</div>

Icon Avatars

<div class="avatar small"><i class="fas fa-user"></i></div>
<div class="avatar medium"><i class="fas fa-user"></i></div>
<div class="avatar large"><i class="fas fa-user"></i></div>
<div class="avatar xlarge"><i class="fas fa-user"></i></div>

Customizing Avatars

You can easily customize the background and text color of avatars using CSS variables or by adding custom classes that override the default styles.

.my-custom-avatar {
background-color: var(--a-color-secondary);
color: var(--a-color-on-secondary);
}