Semantic-UI Image Variations Avatar Variant

Last Updated : 09 Feb, 2022

Semantic UI is an open-source framework that uses CSS and jQuery 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. It uses a class to add CSS to the elements.

An avatar is a graphical illustration of a user or the user’s character or persona. It is generally a circular image. In web pages, it is widely used to show the profile picture of the user or to show the image in a listed item.

To convert a regular image to the avatar in semantic UI, we use the avatar class along with ui and image classes. These classes are applied to the <img> tag only and do not work with other HTML tags.

Semantic-UI Image Variations Avatar Variant Class:

avatar: This class is used to convert a regular image to an avatar image.

Syntax:

<img class="ui avatar image" src="image.png">

Note: To use only the “avatar” class feature, we don’t need to add semantic UI scripts.

Example: This example shows a basic avatar image created using the avatar class of semantic UI.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic UI</title> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" /> 
</head> 
  
<body> 
  <center> 
    <h1 class="header ui green">GeeksforGeeks</h1> 
    <strong>Semantic-UI Image Variations Avatar Variant</strong><br/> 
    <img class="ui image tiny avatar"
         src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200122115631/GeeksforGeeks210.png"/> 
    user 1 
    <br/><br/> 
    <img class="ui image tiny avatar"
         src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220204080028/geeksimage2-200x146.png"/> 
    user 2 
    <br/><br/> 
    <img class="ui image tiny avatar"
         src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220204080129/geeksimage3-200x147.png"/> 
    user 3 
  </center> 
</body> 
</html> 