Vuance UI Kit

Layout

Timeline

A semantic vertical sequence of chronological events with markers and connectors.
  1. Order placed
    Order 1248 was created.
  2. Payment confirmed
    Payment authorized by the provider.
  3. Shipped
    Handed to the courier.

Playground

Configure the component and copy synchronized Vue code.

Interactive preview

Changes are reflected in the example and source.

  1. Order placed
    Order 1248 was created.
  2. Payment confirmed
    Payment authorized by the provider.
  3. Shipped
    Handed to the courier.

Properties

Side

Density

Line

Variant

Vue

<m-timeline>
  <m-timeline-item time="09:00" title="Order placed" variant="outlined">
    Order 1248 was created.
  </m-timeline-item>
</m-timeline>