Timelines

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

Usage


API

v-timeline
Name
align-top
Default
false
Type
boolean
Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
dense
Default
false
Type
boolean
Name
light
Default
false
Type
boolean

Applies the light theme variant

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.


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.


Advanced

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