Blaze UI Avatars Attributes
We can use Blaze UI Avatars to integrate an avatar in the figure element. If you want to create anything that seems like a user profile, you should absolutely use this functionality. Chat UIs, profile photographs, and account photos all can be made using Blaze UI avatars.
Blaze UI has 6 attributes, size, alt, src, alt-2, src-2, and text. Attributes provide additional information about that particular element.
- size: The size attribute specifies the size of the Avatar.
- src: The src attribute specifies the URL to the image to display.
- src-2: The src-2 attribute specifies the URL to the smaller secondary image.
- alt: The alt attribute specifies the alternative text to the image.
- alt-2: The alt-2 attribute specifies the alternative text to the secondary image.
- text: The text attribute specifies the text to display in the middle of the circle.
Blaze UI Avatar CSS Classes:
- c-avatar: This class is used to add the avatar using class.
- c-avatar__img: This class is used to add images to the avatar.
We can add avatars using the avatar tag provided by Blaze UI without defining any class. For this follow the following given syntax.
<blaze-avatar size="..." alt="..." src="..." alt-2="..." src-2="..."> </blaze-avatar>
We can add avatars using the avatar classes provided by Blaze UI.
<div class="c-avatar ..."> <img class="c-avatar__img" alt="..." src="..."> </div>
Example 1: The following code demonstrates the Blaze UI avatars attributes using the Blaze UI avatars tag.
Example 2: The following code demonstrates the Blaze UI avatars attributes using the Blaze UI CSS Classes.
Please Login to comment...