Timeline

The timeline components helps you to simply create a beautiful timeline for your pages. It contains two components the TimelineList and the TimelineItem.

Demo

Timeline

$2400 Design changes

22 DEC 7:20 PM

People care about how you see the world, how you think, what motivates you, what you’re struggling with or afraid of.

Design

New order #1832412

21 DEC 11 PM

People care about how you see the world, how you think, what motivates you, what you’re struggling with or afraid of.

order#1832412

Server payments for April

21 DEC 9:34 PM

People care about how you see the world, how you think, what motivates you, what you’re struggling with or afraid of.

serverpayments

<template>
 <TimelineList title="Timeline with dotted line">
  <TimelineItem
    :icon="{ component: 'ni ni-bell-55', color: 'success' }"
    title="$2400 Design changes"
    date-time="22 DEC 7:20 PM"
    description="People care about how you see the world, how you think, what motivates you, what you’re struggling with or afraid of."
    :badges="['design']"
  />
  <TimelineItem
    :icon="{ component: 'ni ni-html5', color: 'danger' }"
    title="New order #1832412"
    date-time="21 DEC 11 PM"
    description="People care about how you see the world, how you think, what motivates you, what you’re struggling with or afraid of."
    :badges="['order', '#1832412']"
  />
  <TimelineItem
    :icon="{ component: 'ni ni-cart', color: 'info' }"
    title="Server payments for April"
    date-time="21 DEC 9:34 PM"
    description="People care about how you see the world, how you think, what motivates you, what you’re struggling with or afraid of."
    :badges="['server', 'payments']"
  />
</TimelineList>
</template>

<script setup>
import TimelineList from "@/examples/Cards/TimelineList.vue";
import TimelineItem from "@/examples/Cards/TimelineItem.vue";
</script>

1<template>
2 <TimelineList title="Timeline with dotted line">
3  <TimelineItem
4    :icon="{ component: 'ni ni-bell-55', color: 'success' }"
5    title="$2400 Design changes"
6    date-time="22 DEC 7:20 PM"
7    description="People care about how you see the world, how you think, what motivates you, what you’re struggling with or afraid of."
8    :badges="['design']"
9  />
10  <TimelineItem
11    :icon="{ component: 'ni ni-html5', color: 'danger' }"
12    title="New order #1832412"
13    date-time="21 DEC 11 PM"
14    description="People care about how you see the world, how you think, what motivates you, what you’re struggling with or afraid of."
15    :badges="['order', '#1832412']"
16  />
17  <TimelineItem
18    :icon="{ component: 'ni ni-cart', color: 'info' }"
19    title="Server payments for April"
20    date-time="21 DEC 9:34 PM"
21    description="People care about how you see the world, how you think, what motivates you, what you’re struggling with or afraid of."
22    :badges="['server', 'payments']"
23  />
24</TimelineList>
25</template>
26
27<script setup>
28import TimelineList from "@/examples/Cards/TimelineList.vue";
29import TimelineItem from "@/examples/Cards/TimelineItem.vue";
30</script>

Props Information

Name	Type	Description
title	String	Its a prop related to `TimelineList` and used to set the title for the timeline.
description	String	Its a prop related to `TimelineList` and used to set the description for the timeline.
dark	Boolean	Its a prop related to `TimelineList` and used to switch between light and dark mode of the timeline.
color	successprimarysecondaryinfowarningerrordarkdangerlight	Its a prop related to `TimelineItem` and used to set the TimelineItem color.
icon*	Object	Its a prop related to `TimelineItem` and used to set the TimelineItem icon. It has the following keys and is a requierd prop. `component` of type string. `color` of type string.
title*	String	Its a prop related to `TimelineItem` and used to set the `TimelineItem` title. It is a required prop.
description	String	Its a prop related to `TimelineItem` and used to set the description for the timelineItem.
dateTime	String	Its a prop related to `TimelineItem` and used to set the `TimelineItem` date or time.
badges	Array	Its a prop related to `TimelineItem` and used to set the `TimelineItem` labels.