Primer CSS is open-source on Github that is created with GitHub’s design system. We can use Primer CSS by installing it via npm or include the CDN link in our HTML file. It has different types of styles like spacing, color, and typography.
Primer CSS Timeline is used to display the items in the vertical direction. Primer CSS TimelineItem-Avatar is used to give ownership to the author of the timeline event. We will wrap the TimelineItem inside the <div> to make it work perfectly.
In this article, we will discuss Primer CSS TimelineItem-Avatar.
Primer CSS TimelineItem-Avatar Class:
- TimelineItem-avatar: This class is used to add the avatar to the timeline.
Syntax:
<div class="TimelineItem">
<div class="TimelineItem-avatar">
...
</div>
...
</div>Example 1: The following example demonstrates the Primer CSS TimelineItem-Avatar.
<!DOCTYPE html> <html>
<head>
<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 TimelineItem-Avatar </h3>
</div> <br>
<div class="d-flex flex-justify-center">
<div class="TimelineItem">
<div class="TimelineItem-avatar">
<img class="avatar" height="35" width="35" src=
</div>
<div class="TimelineItem-badge">
<svg class="octicon"
width="18" height="18" viewBox="0 0 16 16" >
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499
4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04
3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z" >
</path>
</svg>
</div>
<div class="TimelineItem-body">
GeeksforGeeks Avatar
</div>
</div>
</div>
</body>
</html>
|
Output:
Primer CSS TimelineItem-Avatar
Example 2: The following example demonstrates the Primer CSS TimelineItem-Avatar.
<!DOCTYPE html> <html>
<head>
<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 TimelineItem-Avatar </h3>
</div> <br>
<div class="d-flex flex-justify-center">
<div class="d-flex flex-column">
<div class="TimelineItem TimelineItem--condensed">
<div class="TimelineItem-avatar">
<img class="avatar" height="30" width="30" src=
</div>
<div class="TimelineItem-badge">
<svg class="octicon"
width="18" height="18" viewBox="0 0 16 16" >
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499
4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04
3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z" >
</path>
</svg>
</div>
<div class="TimelineItem-body">
GeeksforGeeks Avatar 1
</div>
</div>
<div class="TimelineItem TimelineItem--condensed">
<div class="TimelineItem-avatar">
<img class="avatar" height="30" width="30" src=
</div>
<div class="TimelineItem-badge">
<svg class="octicon"
width="18" height="18" viewBox="0 0 16 16" >
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499
4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04
3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z" >
</path>
</svg>
</div>
<div class="TimelineItem-body">
GeeksforGeeks Avatar 2
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Primer CSS TimelineItem-Avatar
Reference: https://primer.style/css/components/timeline#timelineitem-avatar