Open In App

Primer CSS Avatars

Improve
Improve
Like Article
Like
Save
Share
Report

Primer CSS is a free open-source CSS framework that’s built upon systems that make the inspiration of the essential style elements like spacing, typography, and color. This systematic method makes sure its patterns are steady and interoperable with every other. it’s highly reusable and versatile.  It’s created with GitHub’s design system. Its approach to CSS is governed by object-oriented CSS principles, functional CSS, and BEM architecture. 

Primer CSS avatars are a way to add images that can be used generally as profile pictures. Avatars are a much simpler way to add profile pictures because it comes with a lot of in-built classes which are readily available to customize an image meant for an avatar.

Primer CSS Avatars:

1. avatar: It is used to make an image an avatar. It resets some styles for alignment, addresses a Firefox image placeholder bug, and rounds the corners.

Syntax:

<img class="avatar" alt="" src="" width="" height="" />

2. avatar-small: It is used to make the avatar smaller than 24px, and it also resets the border-radius to the appropriate level. 

<img class="avatar-small" alt="" src="" width="" height="" />

3. avatar-[1-8]: It is used to set the size of the avatar. The sizes of the avatars go from 16px up to 64px.

<img class="avatar avatar-2" alt="" src="" width="" height="" />

4. avatar-parent-child: This is used to achieve a larger parent avatar than a smaller child avatar overlaying it. To add the child avatar we need to add the avatar-child to get the smaller child avatar.

<div class="avatar-parent-child">
  <img class="avatar" alt="" src="..." width="..." height="..." />
  <img class="avatar avatar-child" alt="" src="..." width="..." height="..." />
</div>

5. AvatarStack, AvatarStack–two, AvatarStack–three-plus: It is used to stack up multiple avatars one over the other. This can be generally used to show multiple participants or users. AvatarStack–two is used to have two avatars and AvatarStack–three-plus is used for three or more avatars. 

<div class="AvatarStack AvatarStack--three-plus">
  <div class="AvatarStack-body">
    <img class="avatar" alt="" src="" width="" height="" />
    ...
  </div>
</div>

6. AvatarStack–right: It can be used to align the avatar stack to right.

<div class="AvatarStack AvatarStack--three-plus 
  AvatarStack--right">
  <div class="AvatarStack-body">
    <img class="avatar" alt="" src="" width="" height="" />
    ...
  </div>
</div>

7. CircleBadge, CircleBadge–[small/medium/large]: Using this class we can have the avatar in a circular shape. We can also specify the size of the badge by adding the size to the CircleBadge–[size].

<div class="CircleBadge CircleBadge--small">
    <img class="avatar" alt="" 
        src="" width="" height="" />
    ...
</div>

8. DashedConnection: This class is used to add a dashed path/connection between different avatars.

<div class="DashedConnection">
  <ul class="">
    <li class="">
      <img class="avatar" alt="" 
        src="" width="" height="" />
    </li> 
    ...
  </ul>
</div>

Example 1: The following code demonstrates the size classes, parent-child avatar, and circular badge are used.

HTML




<!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="">
        <h1 class="color-fg-success"> GeeksforGeeks </h1>
        <h3>Primer CSS Avatars</h3><br />
    </div>
  
    <div class="container-lg clearfix" style="text-align: center;">
        <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 class="col-3 float-left border p-3">
            <h5><u>Circle Badge Medium</u></h5><br />
            <div class="CircleBadge CircleBadge--medium color-bg-subtle">
                <img src=
                width="48" height="48"/>
            </div>
        </div>
    </div>
</body>
</html>


Output:
 

 

Example 2: The below code demonstrates the usage of DashedConnection class.

HTML




<!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="">
        <h1 class="color-fg-success"> GeeksforGeeks </h1>
        <h3>Primer CSS Avatars</h3><br />
    </div>
    <div class="DashedConnection m-6">
        <ul class="d-flex list-style-none flex-justify-between"
            aria-label="A sample GitHub workflow">
            <li class="CircleBadge CircleBadge--small">
                <img src=
            </li>
        
            <li class="CircleBadge CircleBadge--small">
                <img src=
            </li>
              
            <li class="CircleBadge CircleBadge--small">
                <img src=
            </li>
        </ul>
      </div>
</body>
</html>


Output:
 

 

Reference: https://primer.style/css/components/avatars



Last Updated : 24 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads