Timeline Widget Widget
Add a company history, project roadmap or event programme to any page as an accessible ordered list on a rail. You type one milestone per line; ISO dates are shown in your visitors' date style, anything else ("Spring 2025", "Phase 2") exactly as written.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
<iframe src="https://a2z.tools/embed/w/timeline-widget" title="Timeline Widget by A2Z Tools" width="100%" height="600" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>
A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.
<div data-a2z-widget="timeline-widget" data-height="600"></div> <script async src="https://a2z.tools/embed.js"></script>
Adds a small script (what it does) that sizes the widget to fit its content, loads it lazily and keeps it isolated from your page's CSS.
Works with
How it works
Each line is split on the pipe character into four cells: date or label, title, description and an optional link. A date cell written as 2024-05-15 or 2024-05 is recognised as ISO, checked against the real calendar (2023-02-29 is refused and shown as typed) and formatted for the chosen locale, so the same entry reads 15 May 2024 in en-GB, May 15, 2024 in en-US and 15.05.2024 in de-DE; it is also wrapped in a time element with a machine-readable datetime. Slash dates such as 05/06/2024 are never guessed at, because they mean different days in different countries. Setting the current item (a number, or last) adds a visible Now pill and aria-current to that entry, fills the dots before it and dashes the rail after it. The horizontal layout becomes a keyboard-focusable region that scrolls sideways from 480 pixels up and falls back to the vertical rail on phones. Up to 60 entries are drawn; links must be https, http, mailto or tel.
Method
- Line format: date or label | title | description | optional link (one milestone per line; // starts a comment)
- ISO date YYYY-MM-DD or YYYY-MM -> validated against the calendar, formatted with Intl.DateTimeFormat in the publisher locale at 12:00 UTC so no time zone can move the day
- Any other date text -> displayed verbatim (no parsing assumptions)
- current = n -> entry n gets aria-current and a Now label; entries before it are filled, entries after it dashed
- Horizontal layout -> scrollable region (tabindex 0) at 480 px and wider; vertical list below 480 px
Worked examples
Company history in UK format
Inputs: Locale en-GB; lines "2014-03 | First showroom opens" and "2024-05-15 | Carbon-neutral workshop"; current 2
Result: March 2014 and 15 May 2024, the second entry marked Now
Year-month dates show the full month name; full dates use the medium date style of the locale.
Roadmap with labels
Inputs: Lines "Q1 2026 | Mobile app", "Q2 2026 | Team plans", "Later | Offline mode"; layout horizontal
Result: Three entries in a sideways row, labels printed exactly as typed
Quarter labels are not ISO dates, so nothing is reformatted.
Limitations
- Entries are not sorted and dates are not compared with today: the Now marker is the one you set, not worked out from the calendar.
- No images or icons per entry - each milestone is text plus one optional link.
- Formatting applies to ISO dates only; a slash date is shown as typed even when its meaning seems obvious.
Where publishers use it
- The "Our story" section of a family business About page, from founding year to today
- A product roadmap on a SaaS changelog page with shipped quarters filled and the current quarter marked Now
- A wedding-day or conference running order where each slot links to a venue map
- A school or museum page tracing a local history, with labels like "Roman period" that are not dates
- A renovation or construction project page showing which phase the build has reached
Questions
Which date formats are converted and which are left alone?
Only ISO dates: four-digit year, two-digit month and optional two-digit day, joined by hyphens (2024-05-15 or 2024-05). They are formatted in the locale you choose, so a German reader sees 15.05.2024. Everything else - 2009, Q3 2026, Spring, Day 2, 05/06/2024 - is printed exactly as you typed it, because 05/06 is 5 June in the UK and May 6 in the US and the widget will not guess.
How do I mark where we are now?
Set Current item to the entry's number counted from the top (4 marks the fourth line), or to last. That entry gets a Now pill, screen readers hear it as the current item through aria-current, earlier dots are filled and the line after it is dashed so upcoming milestones read as future. Leave it blank for a plain history.
When should I use the horizontal layout?
When you have five to fifteen short entries and a wide content column, such as a roadmap strip under a hero image. Each entry is 210 pixels wide and the row scrolls sideways; keyboard users can focus the region and use the arrow keys. Under 480 pixels wide it automatically turns back into the vertical list, which is easier to read on phones.
Can entries link to articles or bookings?
Yes, through the optional fourth cell. Only https, http, mailto and tel links are accepted; anything else, including javascript: and protocol-relative //links, is dropped silently. Web links open in a new tab with rel="noopener nofollow", and the link text tells screen-reader users which milestone it belongs to.
How many milestones can one timeline hold?
Sixty entries, with titles up to 160 characters and descriptions up to 600. Long content travels in the part of the embed address after the # sign, which browsers never send to a server, so a long history does not hit web-server URL limits.
Is the order changed or sorted by date?
No. Entries appear in the order of your lines, because many timelines mix dates with labels that cannot be sorted (Founded, Today, Next). Put them in the order you want readers to follow, oldest first for a history or newest first for a news-style log.
Cite or recommend this tool
If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.
A2Z Tools Timeline Widget https://a2z.tools/embed/timeline-widget
<a href="https://a2z.tools/embed/timeline-widget">A2Z Tools Timeline Widget</a>
[A2Z Tools Timeline Widget](https://a2z.tools/embed/timeline-widget)
Timeline Widget by A2Z Tools - https://a2z.tools/embed/timeline-widget
Related widgets
-
Numbered How-it-works steps with drawn icons, or an order tracker that highlights the current step.
-
A tick-off checklist with sections, progress, copy and print - saved only on the visitor's device.
-
A keyboard-friendly month calendar with today highlighted and your own marked dates.
-
Live days, hours, minutes and seconds to a date you set, with an "event has started" message.
-
Accessible FAQ accordion with search, expand-all, numbering and a copy-as-text button.
-
Photo grid, masonry columns or a sideways strip with a keyboard-friendly lightbox and alt-text checks.