The kit
Elements [30]
Fancy Timeline V1
Parent / child element
Fancy Timeline V1
A vertical timeline with entries on alternating sides of a centre line. Each entry has a title, a caption such as a year, an icon and a short description, in four design styles.
Design styles
Default + 3 Pro styles
Heading tags
H1 to H6 for titles and captions
Per-entry media
Font Awesome icon
Default
Clean · Pro
Numbered · Pro
Minimal · Pro
All four styles use the same entries and colour settings. Switch between them with the Design Style option.
Example of fancy timeline v1 as a product roadmap with H5 titles and H6 captions…
Example of fancy timeline v1 with the Clean design as a step-by-step process…
Example of fancy timeline v1 with the Numbered design and light grey text…
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 timeline plus three Pro styles: Clean, Numbered and Minimal.
Alternating entries
Entries sit on alternating sides of a vertical centre line, with an icon marker on the line for each one.
Entries
Title, caption and content
Each entry has a title, a caption such as a year or step number, and a rich text description.
Icon markers
Pick any Font Awesome icon for each entry’s marker on the line.
Styling
Heading tags
Choose the HTML tag for titles and captions separately, so the timeline fits the page outline.
Colour controls
Line and marker, icon, heading, caption and text colours, each with a hover state.
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 · Clean · Numbered · Minimal
The look of the timeline. All styles except Default come with Pro.
Timeline Elements
Child elements
Add, reorder, clone or remove entries. Each entry has its own settings, listed below.
Heading Size
H1 · H2 · H3 · H4 · H5 · H6
The HTML tag used for entry titles. Default H2.
Caption Size
H1 · H2 · H3 · H4 · H5 · H6
The HTML tag used for entry captions. 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 entry
Title
Text
The title of the entry.
Caption
Text
A short line under the title, for example a year.
Icon
Icon picker
The Font Awesome icon shown on the line.
Content
Rich text
The description of the entry.
Colours Design tab
Primary Color
Colour, with hover. Default #65bc7b
The colour of the line and the icon markers.
Icons Color
Colour, with hover. Default #ffffff
The colour of the icons inside the markers. The Clean design draws white circles, so set a darker colour for it.
Heading Color
Colour, with hover. Default #000000
The colour of the entry titles.
Caption Color
Colour, with hover. Default #65bc7b
The colour of the captions.
Text Color
Colour, with hover. Default #717171
The colour of the descriptions.
On this page