Semantic-UI Image Variations Avatar Variant

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.

Output:

Reference: https://semantic-ui.com/elements/image.html#avatar