Ordered Timeline List

The Ordered Timeline List component adds a timeline-like appearance to an ordered list, enhancing the visual presentation of sequential content.
Each list item is connected with a vertical line, creating a clear and organized flow that is perfect for displaying step-by-step instructions, historical events, or any content that benefits from a chronological layout.

Installation

1. Copy the Component

   1. What is Lorem Ipsum?

      Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups

   2. Lorem Ipsum Began as Scrambled.

      Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin, though it looks like it, and it actually says nothing,” Before & After magazine answered a curious reader, “Its ‘words’ loosely approximate the frequency with which letters occur in English, which is why at a glance it looks pretty real.”

   

2. Ordered Timeline List CSS

   Add this to the global embed.

   <style>
   .ordered-timeline-list {
     list-style: none;
     counter-reset: item;
   }
   
   .ordered-timeline-list li {
     position: relative;  
     margin-left: -1rem;
     padding-left: 3.5rem;
     margin-top: 0rem;
     margin-bottom: 2.5rem;
   }
   
   .ordered-timeline-list li::before {
       content: counter(item);
       counter-increment: item;
       position: absolute;
       left: 0;
       top: 0;
       font-size: 18px;
       color: var(--body--color--foreground);
       background-color: var(--button--color--neutral--hover-foreground);
       display: flex;
       justify-content: center;
       align-items: center;
       width: 2rem;
       height: 2rem;
       border-radius: 50%;
   }
   </style>