Vertical Timeline
-
Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Aenean condimentum erat vitae elit convallis molestie. Maecenas felis nisl, semper vitae venenatis non
Learn more -
Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Aenean condimentum erat vitae elit convallis molestie. Maecenas felis nisl, semper vitae venenatis non
-
Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Aenean condimentum erat vitae elit convallis molestie. Maecenas felis nisl, semper vitae venenatis non
<script>
import { Timeline, TimelineItemVertical, } from 'flowbite-svelte';
import { Calendar, Adjustments } from 'svelte-heros';
let timelineItems2 = [
{
date: 'February 2022',
title: 'Lorem ipsum dolor sit amet',
href: '/',
icon: Calendar,
iconSize:14,
iconClass: "text-blue-700 dark:text-red-500",
linkname: 'Learn more',
text: 'Consectetur adipiscing elit. Aenean condimentum erat vitae elit convallis molestie. Maecenas felis nisl, semper vitae venenatis non'
},
{
date: 'March 2022',
title: 'Lorem ipsum dolor sit amet',
icon: Adjustments,
iconSize:14,
iconClass: "text-blue-700 dark:text-red-500",
text: 'Consectetur adipiscing elit. Aenean condimentum erat vitae elit convallis molestie. Maecenas felis nisl, semper vitae venenatis non'
},
{
date: 'February 2022',
title: 'Lorem ipsum dolor sit amet',
icon: Calendar,
iconSize:14,
iconClass: "text-blue-700 dark:text-red-500",
text: 'Consectetur adipiscing elit. Aenean condimentum erat vitae elit convallis molestie. Maecenas felis nisl, semper vitae venenatis non'
}
];
</script>
<Timeline>
<TimelineItemVertical timelineItems={timelineItems2} />
</Timeline>
Props
The component has the following props, type, and default values. See types page for type information.
Timeline
Name | Type | Default |
---|---|---|
olClass | string | 'relative border-l border-gray-200 dark:border-gray-700' |
TimelineItemVertical
Name | Type | Default |
---|---|---|
timelineItems | TimelineItemVerticalType[] |