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
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 👇
<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.
The Timeline component has no props, it only returns some wrapping code.
Prop | Type | Default | Accepted values |
| string | - | - |
Prop | Type | Default | Accepted values |
| string | - | - |
Style is defined into 3 files:
src/assets/scss/core/elements/_timeline.scss
src/assets/scss/settings/elements/_timeline.scss
👆Use this to adjust Sass variables
src/assets/scss/theme/elements/_timeline.scss
👆Use this to add custom CSS
Learn more about the Sass logic behind each template.