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 user’s identification or different logo’s on the web page. There are different types of basic avatars that we can make use of.
- Basic: This is used to define a simple basic avatar. You can set avatar’s width and height.
- Avatar Sizes: This is used to give different sizes to avatars from size 1 to 8 in avatar classes.
- Avatar Stack: This is used to stack 2 or more avatars on top of each other.
- Parent-child avatars: This lets you add a child avatar to the parent avatar.
Class:
- avatar: Add the avatar class to the respective element to implement basic examples.
Syntax:
<div class="avatar ">
UI element to be shown.
</div>Example 1: This example demonstrates the different types of Primer CSS Avatars Basic Example using the avatar class.
<!DOCTYPE html> <html>
<head>
<title>Primer CSS Avatars Basic Examples</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 Basic Examples</h3><br />
</div>
<div class="container-lg clearfix" style="text-align: center;">
<div class="col-3 float-left border p-3">
<h5><u>Avatar Basic</u></h5><br />
<img class="avatar" alt="geeksforgeeks" src=
width="64" height="64" />
</div>
<div class="col-6 float-left border p-6">
<h5><u>Avatar Sizes</u></h5><br />
<img class="avatar avatar-1 mr-2"src=
<img class="avatar avatar-2 mr-2" src=
<img class="avatar avatar-3 mr-2" src=
<img class="avatar avatar-4 mr-2" src=
<img class="avatar avatar-5 mr-2" src=
<img class="avatar avatar-6 mr-2" src=
<img class="avatar avatar-7 mr-2" src=
</div>
<div class="col-3 float-left border p-3">
<h5><u>Parent Child Avatars</u></h5><br />
<div class="avatar-parent-child d-inline-flex">
<img class="avatar" src=
width="48" height="48" />
<img class="avatar avatar-child" src=
width="20" height="20" />
</div>
</div>
</div>
</body>
</html>
|
Output:
Avatar Basic Example
Example 2: This example demonstrates the Primer CSS Avatars Stack using the AvatarStack class.
<!DOCTYPE html> <html>
<head>
<title>Primer CSS Avatars Basic Examples</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><u>Primer CSS Avatars Stack</u></h3><br />
</div>
<div class="d-flex flex-justify-center">
<div class="AvatarStack AvatarStack--two">
<div class="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1" aria-label="GeeksforGeeks Avatars">
<img class="avatar" style="width:50px; height:50px;" src=
<img class="avatar" style="width:50px; height:50px;" src=
</div>
</div>
</div>
</body>
</html>
|
Output:
Avatar Stack
Reference link: https://primer.style/css/components/avatars#basic-example