✨ Get all templates and new upcoming releases for just $69. Limited time offer ✨

Timeline

Cruip CSS
Available from v2.3.0

The timeline is a base element for creating roadmaps or milestones 👇

Timeline component

<div class="timeline">
    <div class="timeline-wrap">
        <div class="timeline-item">
            <div class="timeline-item-inner">
                <div class="timeline-item-header tt-u mb-4 reveal-fade">
                    November 2019
                </div>
                <div class="timeline-item-content h4 m-0 reveal-from-side">
                    Deployed a high-quality first release and conducted a market validation test
                </div>
            </div>
        </div>
        <div class="timeline-item">
            <div class="timeline-item-inner">
                <div class="timeline-item-header tt-u mb-4 reveal-fade">
                    December 2019
                </div>
                <div class="timeline-item-content h4 m-0 reveal-from-side">
                    Deployed a high-quality first release and conducted a market validation test
                </div>
            </div>
        </div>
        <div class="timeline-item">
            <div class="timeline-item-inner">
                <div class="timeline-item-header tt-u mb-4 reveal-fade">
                    January 2020
                </div>
                <div class="timeline-item-content h4 m-0 reveal-from-side">
                    Deployed a high-quality first release and conducted a market validation test
                </div>
            </div>
        </div>
        <div class="timeline-item">
            <div class="timeline-item-inner">
                <div class="timeline-item-header tt-u mb-4 reveal-fade">
                    February 2019
                </div>
                <div class="timeline-item-content h4 m-0 reveal-from-side">
                    Deployed a high-quality first release and conducted a market validation test
                </div>
            </div>
        </div>
        <div class="timeline-item">
            <div class="timeline-item-inner">
                <div class="timeline-item-header tt-u mb-4 reveal-fade">
                    March 2020
                </div>
                <div class="timeline-item-content h4 m-0 reveal-from-side">
                    Deployed a high-quality first release and conducted a market validation test
                </div>
            </div>
        </div>
    </div>
</div>

The same result can be achieved in React and Vue using the code below 👇

<Timeline>
  <TimelineItem title="November 2019">
    Deployed a high-quality first release and conducted a market validation test
  </TimelineItem>
  <TimelineItem title="December 2019">
    Deployed a high-quality first release and conducted a market validation test
  </TimelineItem>
  <TimelineItem title="January 2020">
    Deployed a high-quality first release and conducted a market validation test
  </TimelineItem>
  <TimelineItem title="February 2020">
    Deployed a high-quality first release and conducted a market validation test
  </TimelineItem>
  <TimelineItem title="March 2020">
    Deployed a high-quality first release and conducted a market validation test
  </TimelineItem>
</Timeline>
<c-timeline>
  <c-timeline-item title="November 2019">
    Deployed a high-quality first release and conducted a market validation test
  </c-timeline-item>
  <c-timeline-item title="December 2019">
    Deployed a high-quality first release and conducted a market validation test
  </c-timeline-item>
  <c-timeline-item title="January 2020">
    Deployed a high-quality first release and conducted a market validation test
  </c-timeline-item>
  <c-timeline-item title="February 2020">
    Deployed a high-quality first release and conducted a market validation test
  </c-timeline-item>
  <c-timeline-item title="March 2020">
    Deployed a high-quality first release and conducted a market validation test
  </c-timeline-item>                                                                                
</c-timeline>

A timeline is made of a wrapping component (Timeline in React, c-timeline in Vue) and each timeline has its own component (TimelineItem in React, c-timeline-item in Vue).

Pass the title prop for the item title.


TL;DR

The Timeline component has no props, it only returns some wrapping code.

React props (Timeline Item component)

Prop Type Default Accepted values
title required string

Vue props (Timeline Item component)

Prop Type Default Accepted values
title required string

Theming

Style is defined into 3 files:

📋 Core file

src/assets/scss/core/elements/_timeline.scss
👆🚫 Don’t edit this file!

📋 Settings file

src/assets/scss/settings/elements/_timeline.scss
👆 Use this to adjust Sass variables

📋 Theme file

src/assets/scss/theme/elements/_timeline.scss
👆 Use this to add custom CSS

Learn more about the Sass logic behind each template.
Last updated on August 17, 2021