Timeline

This part of the documentation relates to premium templates built with Cruip CSS framework only. If the template you are using is built on the top of Tailwind CSS, please refer to the last part of the documentation.
Available from v2.3.0
General information
The timeline is a the base element for creating roadmaps or milestones 👇
<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 👇
React
Vue
React
<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>
Vue
<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. 
Basic elements - Previous
Modal
Next - Page layouts
Layouts
Last updated 1 month ago