← All elements
<ol class="pc-timeline">
<li>
<time>Oct 12</time>
<h3>Order placed</h3>
<p>Payment confirmed.</p>
</li>
<li>
<time>Oct 13</time>
<h3>Packed in Quezon City</h3>
<p>Wrapped and labelled.</p>
</li>
<li>
<time>Oct 14</time>
<h3>Handed to courier</h3>
<p>Tracking is now active.</p>
</li>
<li>
<time>Oct 16</time>
<h3>Out for delivery</h3>
<p>Arriving today.</p>
</li>
</ol>About this layout
A vertical delivery timeline where each dot and connecting line comes from pseudo-elements on an ordered list. Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.