Eight timeline layouts: a vertical company history, an alternating centre line that collapses on phones, a horizontal roadmap with scroll snapping, an order activity log, a story with image cards, a numbered process, a product changelog and a compact sidebar timeline.
A company history timeline with a line down the left, a dot for each event, the year and a short description. It is an ordered list because the order matters, and years are time elements with machine-readable datetime values.
View code
<ol class="tl1">
<li><time datetime="2019">2019</time><h3>First market stall</h3><p>Twelve mugs and a borrowed table.</p></li>
<li><time datetime="2021">2021</time><h3>Online shop opens</h3><p>Orders from 14 countries in the first year.</p></li>
<li><time datetime="2024">2024</time><h3>New studio</h3><p>Two kilns and a team of five.</p></li>
</ol>
Events alternate left and right of a central line on wide screens and collapse to a single column on narrow ones. The alternation is done with grid placement and :nth-child, so the HTML order stays chronological for assistive technology.
View code
<ol class="tl2">
<li><time datetime="2026-01">Jan</time><p>Brand refresh launched</p></li>
<li><time datetime="2026-04">Apr</time><p>Mobile app in beta</p></li>
<li><time datetime="2026-07">Jul</time><p>10,000 customers</p></li>
<li><time datetime="2026-10">Oct</time><p>Opened a second warehouse</p></li>
</ol>
A product roadmap laid out horizontally with Done, Now and Next stages. On small screens the row scrolls sideways with scroll snapping, the scroll area is focusable for keyboard users, and each stage's status is written in text.
An order activity log with icons on the line for each event type, a description and a relative time. The icons are decorative and the event text says what happened, so the log reads correctly as a plain list.
A storytelling timeline where each milestone is a card with an image area, a date and text, joined by a line. The image areas are CSS placeholders here; replace them with real photos and meaningful alt text describing each moment.
View code
<ol class="tl5">
<li><div class="im" style="--c:#fde68a"></div><div><time datetime="2022-03">March 2022</time><h3>The first collection</h3><p>Six colours, all mixed in the kitchen.</p></div></li>
<li><div class="im" style="--c:#bfdbfe"></div><div><time datetime="2023-09">September 2023</time><h3>Our own kiln</h3><p>Firing times cut from days to hours.</p></div></li>
</ol>
A how-we-work timeline with numbered circles generated by CSS counters on an ordered list, a heading and a short description for each stage. The numbers come from the list itself, so reordering steps never breaks the numbering.
View code
<ol class="tl6">
<li><h3>Discovery call</h3><p>We learn what you sell and who buys it.</p></li>
<li><h3>Design</h3><p>Two layout options, one round of changes.</p></li>
<li><h3>Build and launch</h3><p>Your shop goes live within three weeks.</p></li>
</ol>
A product changelog with version numbers, dates and typed entries like New, Improved and Fixed. Each release is an article with a heading, the type labels are text badges, and dates use time elements for machines and people.
A narrow timeline for sidebars and cards: small dots, short labels and times aligned in a grid. It packs a lot of history into little space, and the latest item is emphasised with a brighter dot and text.
View code
<ol class="tl8">
<li class="now"><span>Reply from support</span><time datetime="2026-10-04T11:00">11:00</time></li>
<li><span>Ticket assigned to Kim</span><time datetime="2026-10-04T10:42">10:42</time></li>
<li><span>Ticket opened</span><time datetime="2026-10-04T10:30">10:30</time></li>
</ol>