The kit
Elements [30]
Fancy Timeline V2
Parent / child element
Fancy Timeline V2
A vertical timeline of content cards on alternating sides of a centre line. Each card has a title, a date or label, rich text, an optional header image and a read more button, in four design styles.
Design styles
Default + 3 Pro styles
Heading tags
H1 to H6
Per-entry media
Header image, read more button
Default
Research
Interviews with 40 customers showed us which features to build first.
Design
A new brand and design system, tested with real customers before any code was written.
Build
The new app was built in six two-week sprints, with a demo at the end of each one.
Read the updateLight · Pro
Research
Interviews with 40 customers showed us which features to build first.
Design
A new brand and design system, tested with real customers before any code was written.
Build
The new app was built in six two-week sprints, with a demo at the end of each one.
Read the updateOutline · Pro
Research
Interviews with 40 customers showed us which features to build first.
Design
A new brand and design system, tested with real customers before any code was written.
Build
The new app was built in six two-week sprints, with a demo at the end of each one.
Read the updateCompact · Pro
Research
Interviews with 40 customers showed us which features to build first.
Design
A new brand and design system, tested with real customers before any code was written.
Build
The new app was built in six two-week sprints, with a demo at the end of each one.
Read the updateAll four styles use the same cards. Light and Outline use fixed white cards with dark text, so only the Primary Color setting changes them.
Example of fancy timeline v2 with header images on every card…
Online store
A WooCommerce store for a homeware brand, with a 40% rise in orders.
SaaS dashboard
A marketing site and docs for an analytics product with 9,000 users.
Mobile app
A launch website for a fitness app, built in three weeks.
Example of fancy timeline v2 with labels instead of dates and read more buttons…
Example of fancy timeline v2 with the Outline design and a dark line…
Version 1.0
The first public release, with five elements.
Version 1.5
Pro design styles for every free element.
Version 2.0
Twenty-six elements in one plugin.
Use cases
Key features
What the element does, in plain terms. Every individual control is listed in the settings reference below.
Layout
Four design styles
The Default dark cards plus three Pro styles: Light, Outline and Compact.
Alternating cards
Cards sit on alternating sides of a vertical centre line, each with a marker on the line.
Cards
Title, date and content
Each card has a title, a date or any label such as Phase 1, and a rich text description.
Header images
Add an image to a card to show it as a header, with the title on top.
Read more buttons
Add a button with its own text and link to any card.
Styling
Colour controls
Line, card, date, heading, text and button colours, each with a hover state. Titles on images have their own colour. Light and Outline use fixed card colours.
Settings reference
Every setting the element exposes, grouped by builder tab. Options are listed where the setting offers a fixed set of choices.
Structure General tab
Design Style
Default · Light · Outline · Compact
The look of the timeline. All styles except Default come with Pro.
Timeline Elements
Child elements
Add, reorder, clone or remove cards. Each card has its own settings, listed below.
Heading Size
H1 · H2 · H3 · H4 · H5 · H6
The HTML tag used for card titles. Default H5.
CSS Class
Adds a class to the wrapping HTML element.
CSS ID
Adds an ID to the wrapping HTML element.
Timeline Element Child element, one per card
Title
Text
The title of the card.
Date / Label
Text
A date or any label, for example January 2026 or Phase 1.
Image
Image upload
An optional header image. The title is shown on top of it.
Read More Text
Text
The text of the button. The button shows when both the text and the link are set.
Read More Link
URL
Where the button links to.
Content
Rich text
The description on the card.
Colours Design tab
Primary Color
Colour, with hover. Default #65bc7b
The colour of the line, the markers and the image overlay. It is the only colour the Light and Outline designs use.
Background Color
Colour, with hover. Default #2f3237
The background of the cards. Light and Outline always use white cards.
Date Background Color
Colour, with hover
The background behind the date.
Date Text Color
Colour, with hover. Default #ffffff
The colour of the date.
Heading Color
Colour, with hover. Default #000000
The colour of titles on cards without an image.
Heading Color (with image)
Colour, with hover. Default #ffffff
The colour of titles shown on a header image.
Text Color
Colour, with hover. Default #ffffff
The colour of the description.
Button Background Color
Colour, with hover
The background of the read more button.
Read More Button Text Color
Colour, with hover. Default #ffffff
The text colour of the read more button.
On this page