# 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.


# 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.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page on GitHub
Last updated:10/21/2021, 6:25:20 AM