OneTaskBy Tim King · Updated
Timeline Builder
Vertical Company History or CV Timeline With Alternating Sides
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Timeline Builder works
A timeline builder makes a vertical line of dated events, each with a marker, heading and short text, for company history, project milestones or a CV. Enter the events, choose a single line or alternating sides, and copy the HTML and CSS.
Timelines turn a list of dates into a story that reads from top to bottom. They suit about pages, product roadmaps, case studies and portfolios, anywhere the order of events matters as much as the events themselves.
How the timeline builder is made
The events are an ordered list, because their order is the point, so screen readers announce "list, 4 items" and read them in sequence. The line and markers are pseudo-elements drawn by CSS, which keeps the markup to a date, a heading and a paragraph per event and adds nothing for assistive technology to read out.
Alternating layout
The alternating layout puts the line down the middle and events on each side in turn. Below 640 pixels there is no room for two columns, so a media query drops it back to a single line on the left. The markup is identical for both layouts.
FAQ
Can I use real dates instead of years?
Yes. The date is plain text, so "March 2024" or "Q3" work as well as a year. For a machine-readable
date, change the date paragraph to a <time> element with a datetime attribute such as
2024-03-01.
Why are the headings h3?
They assume the timeline sits under an h2 section heading on the page. If it sits directly under the page title, change them to h2; if it is deeper, use h4. Heading levels should follow the page outline, not the look you want.
How do I make the newest event appear first?
Put the newest event on the first line. If the list runs newest first, add the reversed attribute
to the <ol> so screen readers and any visible numbers count down instead of up.
Can I add icons or images to each event?
Yes. Add an image or icon inside the list item and style it in the item's CSS. Keep images small and give meaningful ones alt text; decorative icons should have empty alt text so screen readers skip them.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Feature Grid Builder
Responsive icon-title-description feature grids for landing pages.
Card Builder
Design a card component and copy its HTML and CSS.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.
Form Progress Bar
Step indicators and progress bars for multi-step forms and checkouts.
Breadcrumb Generator
Build accessible breadcrumb navigation with optional BreadcrumbList schema.