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

Usage

If you place a v-card inside a v-timeline-item then a caret will appear on the side of the card.

API

v-timeline

Examples

Small dots

Easily alternate styles to provide a unique design.

Icon dots

Conditionally use icons within the v-timeline-item's dot to provide additional context.

Avatar dots

Insert avatars into dots with use of icon slot and v-avatar.

Colored dots

Colors dots create visual breakpoints that make your timelines easier to read.

Opposite slot

The opposite slot provides an additional layer of customization within your timelines.

Dense alert

Dense timelines position all content to the right. In this example, v-alert replaces the card to provide a different design.

Reverse direction

You can reverse the direction of the timeline items by using the reverse prop. This works both in regular and dense mode.

Advanced

Modular components allow you to create highly customized solutions that just work.

Edit this page | language on Github