# Timelines
The v-timeline
is useful for stylistically displaying chronological information.
# Usage
v-timeline
's in their simplest form display a vertical timeline that should contain at least one v-timeline-item
.
# API
# Examples
# Props
# Color
Colored dots create visual breakpoints that make your timelines easier to read.
# Dense
dense timelines position all content to the right. In this example, v-alert
replaces the card to provide a different design.
# Icon dots
Conditionally use icons within the v-timeline-item
's dot to provide additional context.
# Reverse
You can reverse the direction of the timeline items by using the reverse prop. This works both in default and dense mode.
# Small
The small prop allows alternate styles to provide a unique design.
# Slots
# Icon
Insert avatars into dots with use of the icon
slot and v-avatar
.
# Opposite
The opposite slot provides an additional layer of customization within your timelines.
# Timeline item default
If you place a v-card
inside of a v-timeline-item
, a caret will appear on the side of the card.
# Misc
# Advanced
Modular components allow you to create highly customized solutions that just work.