/* Fancy Timeline */
[Timeline]
Tell your story, process, or roadmap as a clear timeline that reads well on desktop and phone.
✓ Vertical with the line left, right, or centered, or horizontal and swipeable. One element covers them all.
✓ No stacking columns by hand: add milestones and the layout takes care of itself.
- kestrelworks.com/about
Kestrel Works
Our Journey
Examples
From founding year to next quarter.
Line position, markers, and card placement in each example are element settings. Companies, dates, and steps are sample content.
- fieldnote.app/roadmap
Product roadmap
[ Layout: Horizontal ] [ Cards: Above ] [ Visible: 4 ]
Example 01
A horizontal roadmap
Quarters run left to right with cards above the line. Swipe the row or use the arrows; each card snaps into place.
- ledgerline.io/onboarding
Your first two weeks
[ Layout: Vertical, line left ] [ Markers: Dots ] [ Heading tag: H3 ]
Example 02
Numbered steps on a left line
A process reads top to bottom with each step on its own dot. Changing the accent color updates the line, markers, and labels together.
Example 03
The center line, on a phone
Alternating cards need width that a phone does not have. On small screens the center layout moves the line to the left and stacks every card on one side, with no extra setup.
[ Layout: Vertical, center ] [ Small screens: single left line ]
[ Motion that steps aside ]
Milestones can fade or slide in one after another as the visitor scrolls, like the last card in the hero. For anyone whose device asks for reduced motion, the reveal is skipped and every item is simply shown.
See it working on a real Avada site.
What you can build
Anything that happens in order.
Company history and “Our story”
Lay out the years your business grew with milestones alternating either side of a center line. It turns an About page from a wall of text into something people scroll through.
Project process and onboarding
Show clients what happens after they sign, phase by phase, with labels such as Discovery or Week 2. Setting expectations early saves a round of emails later.
Product roadmaps
Run quarters across the page as a horizontal timeline and mark each card with its status. Visitors swipe through what has shipped and what is coming next.
Features
Built for every kind of timeline.
Line left, right, or center
Vertical timelines with the line on either side, or centered with optional alternating cards.
Single line on phones
Center layouts move to one left-hand line on small screens automatically.
Horizontal and swipeable
A snap-scrolling carousel with cards above, below, or alternating, 2 to 6 at a time, and styled arrows.
Rich milestone content
Each item has a title, a date or label, formatted text, and an optional link.
Heading tag choice
Set titles as H1 to H6, DIV, P, or SPAN to fit the page outline.
Dots, icons, or images
Markers up to 100 pixels, with a different marker on any single item.
Scroll reveal
Items fade or slide in with a stagger as visitors scroll, or appear straight away.
Respects reduced motion
The reveal is skipped for visitors who have asked their device for less motion.
Colors and typography
Line, marker, border, and card colors, card radius, and separate title and label fonts.
Works the Avada way
One parent element, one child per milestone.
Add an item for each date or step, then pick vertical or horizontal for the whole timeline.
[ ]
Avada Builder
One child item per milestone. Titles, labels, content, links, and markers accept Avada Dynamic Data.
[ ]
Conditional rendering
Show the timeline only when Avada’s logic conditions are met.
[ ]
Avada Live
Switch between vertical and horizontal and watch the timeline rearrange on the page.
[ ]
Live option updates
Colors, typography, and margins and padding per breakpoint update as you edit.
FAQ
Timeline questions
Related elements
Fancy Calendar
Dates on a month or week grid
Events, classes, or availability on a calendar, with details in a popup.
Fancy Video Gallery
Many videos, one quick page
Thumbnails that only load a player when clicked, in grid, slider, or playlist.
Fancy Advanced Table
Detail that needs columns
Sortable, searchable tables for specs, prices, or schedules.