The v-timeline is useful for stylistically displaying chronological information.
v-timeline's in their simplest form display a vertical timeline that should contain at least one v-timeline-item.
Select your desired component from below and see the available props, slots, events and functions.
Below is a collection of simple to complex examples.
The small prop allows alternate styles to provide a unique design.
Conditionally use icons within the v-timeline-item's dot to provide additional context.
You can reverse the direction of the timeline items by using the reverse prop. This works both in default and dense mode.
If you place a v-card inside of a v-timeline-item, a caret will appear on the side of the card.
dense timelines position all content to the right. In this example, v-alert replaces the card to provide a different design.
The opposite slot provides an additional layer of customization within your timelines.
Insert avatars into dots with use of the icon slot and v-avatar.
Colored dots create visual breakpoints that make your timelines easier to read.
Modular components allow you to create highly customized solutions that just work.