Truly fine
Documentation.
How to set up the timeline section
Last update:
The timeline section displays steps, milestones, or key events with this customizable timeline section.
Section settings
Heading: Set a title for this section. This is optional.
Subheading: Set a subtitle for this section. This is optional.
Heading alignment: Select the alignment for the heading and subheading. Options: Left, Center, Right.
Layout
Section width: Adjust whether this section should span the full width of the page (100%) or be contained within a limited layout. Applies on desktop. On mobile, the section spans the entire width of the screen.
Section inner max width (px): Set the maximum width of the content inside this section in pixels.
Section left/right gutter: Adjust the left and right spacing of the section relative to the viewport edge on narrow screens.
Vertical inner spacing: Adjust the spacing between the content and the top/bottom edges of this section in pixels.
Vertical outer spacing: Adjust the space between this section and the sections above and below it in pixels.
Styles
Heading size: Select the size of the timeline item heading. Options: Extra Small, Small, Medium, Large, Extra Large.
Description size: Select the size of the timeline item description. Options: Extra Small, Small, Medium, Large, Extra Large.
Font scale: Adjust the overall text scaling for the Timeline item, affecting the heading, description, and other text elements.
Section heading color: Choose the color for the heading of the section.
Section subheading color: Choose the color for the subheading of the section.
Section background color: Choose the background color for the section.
Timeline heading color: Choose the color for the timeline item headings.
Timeline text color: Choose the color for the timeline item descriptions.
Circle border color: Choose the color for the border of the timeline circles.
Circle background color: Choose the color for the background of the timeline circles.
Circle text color: Choose the color for the text inside the timeline circles.
Timeline item
Number: Set the number or text that appears inside the timeline circle.
Heading: Set the title for the timeline item.
Description: Add a description for the timeline item.
Can't find what you are looking for? Feel free to submit a request.