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.
<!DOCTYPE html> <html>
<head>
<title>Primer CSS Avatars Circle Badge</title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body>
<div class="text-center">
<h1 class="color-fg-success">
GeeksforGeeks
</h1>
<h3>Primer CSS Avatars Circle Badge</h3><br />
<h5><u>Small Medium Large Circle Badge</u></h5><br />
</div>
<div class="d-flex flex-justify-center">
<div class="CircleBadge CircleBadge--small
color-bg-subtle m-3">
&
</div>
<div class="CircleBadge CircleBadge--medium
color-bg-subtle m-3">
&
</div>
<div class="CircleBadge CircleBadge--large
color-bg-subtle m-3">
&
</div>
</div>
<h5 class="text-center"><u>
Dashed Connection Circle Badge
</u></h5>
<div class="DashedConnection m-3">
<ul class="d-flex list-style-none
flex-justify-between">
<li class="CircleBadge CircleBadge--small
color-bg-subtle"> <</li>
<li class="CircleBadge CircleBadge--small
color-bg-subtle"> ></li>
</ul>
</div>
</body>
</html>
|
Output:
Primer CSS Avatars Circle Badge
Example 2: This example demonstrates the dashed connection small circle badge.
<!DOCTYPE html> <html>
<head>
<title>Primer CSS Avatars Circle Badge</title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body>
<div class="text-center">
<h1 class="color-fg-success">
GeeksforGeeks
</h1>
<h3>Primer CSS Avatars Circle Badge</h3><br />
<h5><u>Dashed Connection Small Circle Badge</u></h5><br />
</div>
<div class="DashedConnection m-6">
<ul class="d-flex list-style-none
flex-justify-between">
<li class="CircleBadge CircleBadge--small
color-bg-subtle">£</li>
<li class="CircleBadge CircleBadge--small
color-bg-subtle">¢</li>
<li class="CircleBadge CircleBadge--small
color-bg-subtle">€</li>
<li class="CircleBadge CircleBadge--small
color-bg-subtle">¥</li>
</ul>
</div>
</body>
</html>
|
Output:
Dashed Connection Small Circle Badge
Reference: https://primer.style/css/components/avatars#circle-badge