Timeline

Instructions

To make this component work with other components you must:

Add a background color to each section div on this page. This will ensure that the progress bar does not appear in other sections of the page.
Make sure this page uses a page-wrapper div to wrap all components on the page. This, along with step 3, makes it possible to edit the content inside of the timeline.
Add the timeline-on-page class to the page-wrapper and the main-wrapper class. This, along with step 2, makes it possible to edit the content inside of the timeline.

Update:

New timelines available! Click here to see our new timeline sections.

Tagline

Medium length section heading goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Button

Tagline

Medium length section heading goes here

Button

Tagline

Medium length section heading goes here

Button

Date

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Date

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Date

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Date

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Date

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Important:

If you rename this component, remember to update the classes in the HTML embed named timeline14_tab-change found inside the timeline14_tab-change div.

Code editor showing nested components and folders for timeline14 with padding and container-large settings.

Date

Long heading is what you see here in this feature section

Button

Date

Long heading is what you see here in this feature section

Button

Date

Long heading is what you see here in this feature section

Button

Date

Long heading is what you see here in this feature section

Button

Date

Long heading is what you see here in this feature section

Button

Tagline

Medium length section heading goes here

Button

Date

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Date

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Date

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Date

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Date

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Important:

If you rename this component, remember to update the classes in the HTML embed named timeline15_tab-change found inside the timeline15_content div.

Code structure with nested folders and files with names like section_timeline15 and timeline15_component.

Date

Long heading is what you see here in this feature section

Button

Date

Long heading is what you see here in this feature section

Button

Date

Long heading is what you see here in this feature section

Button

Date

Long heading is what you see here in this feature section

Button

Date

Long heading is what you see here in this feature section

Button

Instructions

To make this component work with other components you must:

Add a background color to the section div above ↑ this Timeline section. This is will help hide the progress line overflow.
Add z-index-2 class to the section div above ↑ this Timeline section. This will ensure the oveflowing progress line from the Timeline section below ↓ is hidden underneath it.

Tagline

Medium length section heading goes here

Button

Date

Short heading here

Button

Date

Short heading here

Button

Date

Short heading here

Button

Date

Short heading here

Button

Instructions

To make this component work with other components you must:

Add a background color to the section div above ↑ this Timeline section. This is will help hide the progress line overflow.
Add z-index-2 class to the section div above ↑ this Timeline section. This will ensure the oveflowing progress line from the Timeline section below ↓ is hidden underneath it.

Tagline

Medium length section heading goes here

Button

Date

Short heading here

Button

Date

Short heading here

Button

Date

Short heading here

Button

Date

Short heading here

Button

Instructions

To make this component work with other components you must:

Add a background color to the section div above ↑ this Timeline section. This is will help hide the progress line overflow.
Add z-index-2 class to the section div above ↑ this Timeline section. This will ensure the oveflowing progress line from the Timeline section below ↓ is hidden underneath it.

Tagline

Medium length section heading goes here

Button

Date

Short heading here

Button

Date

Short heading here

Button

Date

Short heading here

Button

Date

Short heading here

Button

Instructions

To make this component work with other components you must:

Add a background color to each section div on this page. This will ensure that the progress bar does not appear in other sections of the page.
Make sure this page uses a page-wrapper div to wrap all components on the page. This, along with step 3, makes it possible to edit the content inside of the timeline.
Add the timeline-on-page class to the page-wrapper and the main-wrapper class. This, along with step 2, makes it possible to edit the content inside of the timeline.

Update:

New timelines available! Click here to see our new timeline sections.

Tagline