Blaze UI is a framework-free open source UI toolkit that uses JavaScript components to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. This framework allows us to use various of its styles and properties to make a website more user-friendly.
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.
Syntax:
<blaze-avatar
size="..."
alt="..."
src="..."
alt-2="..."
src-2="...">
</blaze-avatar>We can add avatars using the avatar classes provided by Blaze UI.
Syntax:
<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.
<!DOCTYPE html><html>
<head>
<script type="module" src=
</script>
<script nomodule="" src=
</script>
<link rel="stylesheet" href=
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2> Blaze UI Avatar </h2>
<blaze-avatar size="super" alt="geeksforgeeks"
src=
alt-2="geeksforgeeks"
src-2=
</blaze-avatar>
</body>
</html>
|
Output:
Example 2: The following code demonstrates the Blaze UI avatars attributes using the Blaze UI CSS Classes.
<!DOCTYPE html><html>
<head>
<script type="module" src=
</script>
<script nomodule="" src=
</script>
<link rel="stylesheet" href=
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2> Blaze UI Avatar using CSS classes. </h2>
<div class="c-avatar c-avatar u-super">
<img class="c-avatar__img" alt="GeeksforGeeks"
src=
</div>
<h2>
Blaze UI Avatar using CSS classes with Initials.
</h2>
<div class="c-avatar c-avatar u-super"
data-text="GFG"></div>
</body>
</html>
|
Output:
Reference: https://www.blazeui.com/components/avatars/