# Timelines

The v-timeline is useful for stylistically displaying chronological information.


# Examples

# Props

# Direction

Switch between a horizontal and vertical timeline in real-time using the direction prop.

# Side

Use the side property to force all items to one side of the timeline.

# Alignment

By default, v-timeline-item content is vertically aligned center. The align prop also supports top alignment.

# Dot color

Colored dots create visual breakpoints that make your timelines easier for users to read.

# Icon dots

Use icons within the v-timeline-item dot to provide additional context.

# Size

The size prop allows you to customize the size of each dot.

# Truncated line

Truncate the start, end or both ends of the timeline center line by using the truncate-line prop.

# Line inset

Modify the inset of dividing lines by specifying a custom amount using the line-inset prop.

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

# Misc

# Advanced

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.