FBK Timeline

An ordered list of steps: vertical, alternate or horizontal.

Used in 6 templates
13 options
Includes FBK Timeline step
Native Bricks element

Copying for Fancy Framework · Desktop first

Needs a framework. Get Fancy Framework (free)

One FBK Timeline, as in the first example below. Change anything from the panel after you paste it.

In the annual plan, $99/year. See plans

Every FBK Timeline variation

Live from the demo site. Switch the width and the background, or open it full screen.

Preview of the timeline template: a showcase of the FBK Timeline and FBK Timeline step components for Bricks Builder

The options

Every property of the component, in the order the Bricks panel shows them. FBK Timeline step has its own, in each piece you drop in.

The options of FBK Timeline
Option	Choices	Default
LayoutAlternate turns vertical on phones; Horizontal turns vertical on tablets and phones.	Vertical, Alternate, Alternate, date across the line, Horizontal	Vertical
Date positionSide: in a column before the line (Vertical) or above the marker (Horizontal). Above the title on phones. For Alternate, pick the layout «Alternate, date across the line».	Above the title, Side	Above the title
MarkerNumber counts the steps by itself. Icon uses each step's icon.	Dot, Number, Icon	Dot
LookPlain: no box. Soft: a tinted box that fills on hover. Outline: a thin edge that fills on hover. Solid: filled. Elevated: a raised surface with a small shadow. The same looks as every Fancy Bricks component (and the buttons: Ghost, Secondary, Outline, Primary).	Plain, Soft, Outline, Solid, Elevated	Soft
ToneBrand: your accent color. Neutral: the text color around it. White: the same on every background, for controls over photos.	Brand, Neutral, White	Neutral
ShapeRound: a circle on icons, a pill on text. Blob: a bubble that turns round on hover (icons).	Rounded, Round, Square, Blob	Round
Line	Solid, Dashed, None	Solid
Steps	Plain, In cards	Plain
DensityCompact: short rows such as an agenda: the title at text size and smaller gaps.	Normal, Compact	Normal
Date style	Text, Chip	Text
Line fillThe line fills with the accent color, one segment after another, while the page scrolls: from empty when the timeline comes into view to full at its last step, or at the end of the page when the timeline sits there. Inside a sticky block it fills while that block stays in place. Uses the timeline's script (Execute code); without it, in the builder and with reduced motion the line stays still. On by default: the timeline is the one piece of the library that moves with the scroll.	None, On scroll	On scroll
Markers light upEach marker (dot, number or icon) starts as an outline and lights up when the line reaches it. Works with or without Line fill. Same script; without it every marker is lit.	None, On scroll	On scroll
BackgroundDark or Brand when the timeline sits on a dark or brand background you made.	Auto, Light, Dark, Brand	Auto