Primer CSS Timeline TimelineItem-Break

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-Break is used to create the horizontal break line in the timeline.

In this article, we will discuss Primer CSS TimelineItem-Break.

Primer CSS TimelineItem-Break Class:

• TimelineItem-break: This class is used to create the horizontal break line in the timeline.

Syntax:

<div class="TimelineItem">
 <div class="TimelineItem-badge">
 ...
 </div>
 <div class="TimelineItem-break"></div>
 <div class="TimelineItem-body">
 ...
 </div>
</div>

Example 1: The following example demonstrates the Primer CSS TimelineItem-Break.

Output:

👁 Image

Example 2: The following example demonstrates the Primer CSS TimelineItem-Break.

Output:

👁 Image

Reference: https://primer.style/#timelineitem-break