A Timeline is a display of a list of events in chronological order. It is typically a graphic design showing a long bar labelled with dates alongside itself and usually events. Timelines can use any time scale, depending on the subject and data.

QTimelines have 3 media breakpoints. View on a desktop and click the “View Desktop” link on the right side, then resize the browser window to see the media breakpoints in action.


Edit /quasar.conf.js:

framework: {
components: [

Basic Usage

<q-timeline color="secondary">
<q-timeline-entry heading>
Timeline Subject

title="Event Title"
subtitle="February 22, 1986"
Lorem ipsum dolor sit amet.

QTimeline (Parent) Vue Properties

Vue Property Type Description
color String Color of the text
dark Boolean When rendering on a dark background.

QTimelineEntry (Child) Vue Properties

Vue Property Type Description
heading Boolean Display a timeline subject which helps group timeline entries into separate chunks.
tag String HTML tag to use to render the timeline entry DOM element.
side Boolean On wider windows, you can choose on which side to display this entry. Default is on the right side.
icon String Icon to use.
color String Color to use for this entry.
title String Title of the entry.
subtitle String Addition to title of the entry.