Primer CSS Avatars Circle Badge

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. It is highly reusable and flexible. It is created with GitHub’s design system.

Avatars are an important tool to signify the user’s identification or web page logo on the web page.  There are different types of avatars that we can make use of. One of them is the Circle Badge. Circle Badge is used to display icons or images like a circular badge. They come in different sizes like small, medium, and large. Two or more circular badges can also be shown interconnected through the DashedConnection type.

Primer CSS Avatars Circle Badge classes:

• CircleBadge: This class is used to add the respective element to implement this badge.
• CircleBadge–small: This class is used to set the size of the circle badge to a small size.
• CircleBadge–medium: This class is used to set the size of the circle badge to medium size.
• CircleBadge–large: This class is used to set the size of the circle badge to a large size.
• DashedConnection: This class is used to set connections between two or more circular badges.

Syntax:

<div class="CircleBadge ">
       ...
</div>

Example 1: This example demonstrates the different types of Primer CSS Avatars Circle Badge using the CircleBadge class. In the first row, you can see the laptop emoji in different sizes circle badges. In the second row, two emojis are shown as connected.

Output: 

Primer CSS Avatars Circle Badge

Example 2:  This example demonstrates the dashed connection small circle badge. 

Output:

Dashed Connection Small Circle Badge

Reference: https://primer.style/css/components/avatars#circle-badge