v-timeline is useful for stylistically displaying chronological information.
If you place a
v-card inside a
v-timeline-item then a caret will appear on the side of the card.
Easily alternate styles to provide a unique design.
Conditionally use icons within the
v-timeline-item's dot to provide additional context.
Insert avatars into dots with use of
icon slot and
Colors dots create visual breakpoints that make your timelines easier to read.
The opposite slot provides an additional layer of customization within your timelines.
Dense timelines position all content to the right. In this example,
v-alert replaces the card to provide a different design.
You can reverse the direction of the timeline items by using the
reverse prop. This works both in regular and dense mode.
Modular components allow you to create highly customized solutions that just work.