Timeline

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 5 months ago