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=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" />
<img class="avatar avatar-2 mr-2" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" />
<img class="avatar avatar-3 mr-2" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" />
<img class="avatar avatar-4 mr-2" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" />
<img class="avatar avatar-5 mr-2" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" />
<img class="avatar avatar-6 mr-2" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" />
<img class="avatar avatar-7 mr-2" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" />
</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=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg"
width="48" height="48" />
<img class="avatar avatar-child" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg"
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=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg"
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=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg">
</li>
<li class="CircleBadge CircleBadge--small">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg">
</li>
<li class="CircleBadge CircleBadge--small">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg">
</li>
</ul>
</div>
</body>
</html>
Output:
Similar Reads
Primer CSS Primer CSS is a free open-source CSS framework built with the GitHub design system to support the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure that our patterns are steady and intero
3 min read
Primer CSS Introduction Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are ste
4 min read
Primer CSS Utility
Primer CSS AnimationsPrimer 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. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
4 min read
Primer CSS BordersPrimer CSS is a free and open-source CSS framework. It is built upon the systems that create the foundation of the basic style elements such as spacing, typography, and color. Created with GitHub’s design system, it is highly reusable and flexible.Primer CSS Borders is a utility class that applies b
3 min read
Primer CSS Box shadowPrimer 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. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
4 min read
Primer CSS ColorsPrimer 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. This systematic method makes sure our patterns are steady and interoperable with every other. It is highly reusable and flexible. I
7 min read
Primer CSS DetailsPrimer CSS is a free open-source CSS framework that is built upon a GitHub design system to provide support to the broad spectrum of GitHub websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are stead
2 min read
Primer CSS FlexboxPrimer CSS is a free open-source CSS framework based on principles that set the foundation for basic design elements like spacing, typeface, and color. This rigorous approach ensures that our patterns are consistent and interoperable.Primer CSS Flexbox:Flex container: Flex Container is used to make
6 min read
Primer CSS GridPrimer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure that our patterns ar
4 min read
Primer CSS LayoutPrimer CSS is a free and open-source CSS framework. It is built upon the systems that create the foundation of the basic style elements such as spacing, typography, and color. Created with GitHub’s design system, it is highly reusable and flexible.Primer CSS Layout is used to change the document lay
2 min read
Primer CSS MarginPrimer CSS is a free and open-source CSS framework that is built using the GitHub design system for providing support to the broad spectrum of GitHub websites. It helps in creating the foundation of the basic style elements such as spacing, components, typography, color, etc.In this article, we'll s
3 min read
Primer CSS PaddingPadding is used to create space around the element, inside any defined border. We can set different padding for individual sides(top, right, bottom, left). It is important to add border properties to implement padding properties.Primer CSS Padding:Shorthand: Padding has many variations, that can be
3 min read
Primer CSS TypographyPrimer CSS is a free open-source CSS framework that is built upon a GitHub design system to provide support to the broad spectrum of GitHub websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are stead
5 min read
Primer CSS Components
Primer CSS AlertsPrimer 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.Alerts are used to signify an important message to th
3 min read
Primer CSS AutocompletePrimer CSS is a free open-source CSS framework that's created upon systems that make the insights of the essential style elements like spacing, typography, and color. This methodical system makes sure its patterns are steady and interoperable with every other. It's largely reusable and adaptable. Â I
3 min read
Primer CSS AvatarsPrimer 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. Â I
4 min read
Primer CSS BlankslatePrimer CSS is a free and open-source CSS framework. It is built upon the systems that create the foundation of the basic style elements such as spacing, typography, and color. Created with GitHub’s design system, it is highly reusable and flexible. Primer CSS Blankslate is used as a placeholder when
5 min read
Primer CSS Box OverlayPrimer 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. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read
Primer CSS Branch namePrimer 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. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read
Primer CSS BreadcrumbsPrimer 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.Primer CSS offers us so many components, and Breadcru
2 min read
Primer CSS ButtonsPrimer 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. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read
Primer CSS DropdownPrimer CSS is a free and open-source CSS framework that is built using the GitHub design system for providing support to the broad spectrum of GitHub websites. It helps in creating the foundation of the basic style elements such as spacing, components, typography, color, etc.Dropdowns are lightweigh
4 min read
Primer CSS FormsPrimer CSS is a free and open-source CSS framework. It is built upon the systems that create the foundation of the basic style elements such as spacing, typography, and color. Created with GitHub’s design system, it is highly reusable and flexible.Primer CSS Forms provide different components for in
6 min read
Primer CSS HeaderPrimer CSS is a free open-source CSS framework that is built upon a GitHub design system to provide support to the broad spectrum of GitHub websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are stead
3 min read
Primer CSS LabelsPrimer 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. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
3 min read
Primer CSS LinksPrimer CSS is a free and open-source CSS framework. It is built upon the systems that create the foundation of the basic style elements such as spacing, typography, and colour. Created with GitHub’s design system, it is highly reusable and flexible.Primer CSS Links are used to decorate links in the
3 min read
Primer CSS LoadersPrimer 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. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read
Primer CSS MarkdownPrimer CSS is a free open-source CSS framework built with the GitHub design system to support the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure that our patterns are steady and intero
3 min read
Primer CSS NavigationPrimer CSS is a free open-source CSS framework that is formed upon systems that establish the foundation of the basic style elements such as spacing, typography, and color. This systematic structure ensures our patterns are stable and interoperable with every other. Its approach to CSS is inspired b
6 min read
Primer CSS PaginationPrimer 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. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read
Primer CSS PopoverPrimer CSS is a free open-source CSS framework that is built upon a GitHub design system to provide support to the broad spectrum of GitHub websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are stead
5 min read
Primer CSS ProgressPrimer CSS is a free open-source CSS framework that is built upon the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are ste
4 min read
Primer CSS Select menuPrimer CSS is a free open-source CSS framework built on principles that establish the foundation for basic design elements including spacing, typeface, and color. Our patterns will be consistent and compatible as a result of this method. Its CSS approach is influenced by object-oriented CSS concepts
4 min read
Primer CSS SubheadPrimer 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. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read
Primer CSS TimelinePrimer CSS is a free open-source CSS framework that is built upon the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are ste
7 min read
Primer CSS ToastsPrimer 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. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
3 min read
Primer CSS TruncatePrimer CSS is a CSS framework that comes with pre-styled components and a design language with spacing, typography, and Theming that helps in building a website effectively. This systematic method makes sure our patterns are steady and interoperable with every other. It is created with GitHub’s desi
2 min read
Primer CSS Marketing
Primer CSS Marketing ButtonsPrimer 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.Buttons are used to define an action that can be perf
2 min read
Primer CSS Marketing FiltersPrimer 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.Filters are used to change the overall background or
2 min read
Primer CSS Marketing LinksPrimer 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. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read
Primer CSS Marketing TypographyTypography is a feature of Primer for styling and formatting the text content. It is used to create headings, subheadings, paragraphs, pull quotes, add more design-oriented font styles, and much more. It's responsive, but on a smaller scale, and the headlines are set in the marketing typeface.Primer
3 min read