Avatar
A User profile image Component
Properties#
| Name | Description |
|---|---|
| .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#
<figure class="avatar">
<img src="/avatar-1.svg" class="bg-pink-300" alt="Avatar" />
</figure>rounded#
<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>