Blaze UI Avatars 2 Images
Last Updated :
06 May, 2022
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 excellent 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 Avatars provides the feature to add 2 images in a single avatar. The size of the 2 image avatars varies from super, xlarge, large, small, to xsmall.
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 c-avatar ...">
<img class="c-avatar__img" alt="..." src="...">
<img class="c-avatar__img" alt="..." src="...">
</div>
Example 1: The following code demonstrates the Blaze UI avatar with 2 images using the Blaze UI avatar tag of size super, xlarge and large.
HTML
<!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>
<h3>super</h3>
<blaze-avatar size="super" alt="geeksforgeeks"
src=
alt-2="geeksforgeeks"
src-2=
</blaze-avatar>
<h3>xlarge</h3>
<blaze-avatar size="xlarge" alt="geeksforgeeks"
src=
alt-2="geeksforgeeks"
src-2=
</blaze-avatar>
<h3>large</h3>
<blaze-avatar size="large" alt="geeksforgeeks"
src=
alt-2="geeksforgeeks"
src-2=
</blaze-avatar>
</body>
</html>
|
Output:
Example 2: The following code demonstrates the Blaze UI avatar with 2 images using the Blaze UI avatar tag of size medium, small and xsmall.
HTML
<!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>
<h3>medium</h3>
<blaze-avatar alt="geeksforgeeks"
src=
alt-2="geeksforgeeks"
src-2=
</blaze-avatar>
<h3>small</h3>
<blaze-avatar size="small" alt="geeksforgeeks"
src=
alt-2="geeksforgeeks"
src-2=
</blaze-avatar>
<h3>xsmall</h3>
<blaze-avatar size="xsmall" alt="geeksforgeeks"
src=
alt-2="geeksforgeeks"
src-2=
</blaze-avatar>
</body>
</html>
|
Output:
Reference: https://www.blazeui.com/components/avatars/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...