Avatar

A User profile image Component

Properties#

NameDescription
.avatar The avatar component container
.avatar-rounded The avatar round style
[data-initial] The initial letters to be displayed on default avatar


Features#

initial#



<figure class="avatar bg-gray-300" data-initial="avatar"></figure>

image#

Avatar
Avatar
Avatar
Avatar
Avatar


<figure class="avatar">
  <img src="/avatar-1.svg" class="bg-pink-300" alt="Avatar"  />
</figure>

rounded#

Avatar
Avatar
Avatar
Avatar
Avatar
<figure class="avatar avatar-rounded">
  <img src="/avatar-1.svg" alt="Avatar">
</figure>

background#

Use background color and color to change avatar colors



<figure class="avatar bg-gray-500 text-white" data-initial="avatar"></figure>