07
Examples
Example 1
This is what one TimelineThing Stack looks like. In this example, both nub and title toggle the content.
Example 2
This is what two TimelineThing Stacks look like.
Again in these examples, both nub and title toggle the content.
Example 3
This is what a bunch of TimelineThing Stacks can look like.
Nubs set as links.
Settings
Line Color: Choose your vertical line color.
Line Width: Choose your vertical line width.
Left Margin: Tweak here for finer tuning.
Right Margin: Tweak here for finer tuning.
Padding Bottom: Tweak here to extend the line at the bottom.
Date Size: Choose the font size of the text.
Line Height: Set your line height here.
Top Margin: Tweak here for finer tuning.
Set Nub Link: If you want the nub to act as a link, check here and configure the link below.
Nub Color: Choose the color for the circular nub.
Nub Hover: Choose the nub hover color. If you don't want a hover color, simply make both colors the same.
Nub Size: Set the size the circular nub.
Horizontal: Tweak here for finer tuning of the circular nub's horizontal position.
Vertical: Tweak here for finer tuning of the circular nub's vertical position.
Background Type: Choose between None, Color, Vertical Gradient, Horizontal Gradient, Local Image or Warehoused Image.
Bottom Border: Choose the color for the Bottom Border.
Border Height: Set the border height.
Top Corners: Select the radius (roundness) of the top left and right rounded corners.
Bottom Corners: Select the radius (roundness) of the bottom left and right rounded corners.
Start Open: Check here if you want your content to start in the open position.
Background Type: Choose between None, Color, Vertical Gradient, Horizontal Gradient, Local Image or Warehoused Image.
Toggle Speed: Tweak how fast or slow you want the content to toggle open.