Timeline

Timeline component shows a list of events in chronological order.

Class name	Type
timeline	Component	Container element
timeline-compact	Responsive	forces all items on one side
timeline-snap-icon	Modifier	snaps the icon to the start instead of middle
timeline-vertical	Responsive	Shows the timeline vertically
timeline-horizontal	Responsive	Shows the timeline horizontally
timeline-start	Component	The content inside <li> that will be at the start direction
timeline-middle	Component	The content inside <li> that will be at the middle
timeline-end	Component	The content inside <li> that will be at the end direction
timeline-box	Modifier	Applies a box style to timeline-start or timeline-end

The hr tag at the start or end of each item, displays a line to connect items.

# Timeline with text on both sides and icon

1984

First Macintosh computer
1998

iMac
2001

iPod
2007

iPhone
2015

Apple Watch

# Timeline with bottom side only

First Macintosh computer
iMac
iPod
iPhone
Apple Watch

# Timeline with top side only

First Macintosh computer
iMac
iPod
iPhone
Apple Watch

# Timeline with different sides

First Macintosh computer
iMac
iPod
iPhone
Apple Watch

# Timeline with colorful lines

First Macintosh computer
iMac
iPod
iPhone
Apple Watch

# Timeline without icons

First Macintosh computer
iMac
iPod
iPhone
Apple Watch

# Vertical timeline with text on both sides and icon

1984

First Macintosh computer
1998

iMac
2001

iPod
2007

iPhone
2015

Apple Watch

# Vertical timeline with bottom side only

First Macintosh computer
iMac
iPod
iPhone
Apple Watch

# Vertical timeline with top side only

First Macintosh computer
iMac
iPod
iPhone
Apple Watch

# Vertical timeline with different sides

First Macintosh computer
iMac
iPod
iPhone
Apple Watch

# Vertical timeline with colorful lines

First Macintosh computer
iMac
iPod
iPhone
Apple Watch

# Vertical timeline without icons

First Macintosh computer
iMac
iPod
iPhone
Apple Watch

# Responsive: vertical by default, horizontal on large screen

1984

First Macintosh computer
1998

iMac
2001

iPod
2007

iPhone
2015

Apple Watch

# Timeline with icon snapped to the start

1984
First Macintosh computer
The Apple Macintosh—later rebranded as the Macintosh 128K—is the original Apple Macintosh personal computer. It played a pivotal role in establishing desktop publishing as a general office function. The motherboard, a 9 in (23 cm) CRT monitor, and a floppy drive were housed in a beige case with integrated carrying handle; it came with a keyboard and single-button mouse.
1998
iMac
iMac is a family of all-in-one Mac desktop computers designed and built by Apple Inc. It has been the primary part of Apple's consumer desktop offerings since its debut in August 1998, and has evolved through seven distinct forms
2001
iPod
The iPod is a discontinued series of portable media players and multi-purpose mobile devices designed and marketed by Apple Inc. The first version was released on October 23, 2001, about 8+1⁄2 months after the Macintosh version of iTunes was released. Apple sold an estimated 450 million iPod products as of 2022. Apple discontinued the iPod product line on May 10, 2022. At over 20 years, the iPod brand is the oldest to be discontinued by Apple
2007
iPhone
iPhone is a line of smartphones produced by Apple Inc. that use Apple's own iOS mobile operating system. The first-generation iPhone was announced by then-Apple CEO Steve Jobs on January 9, 2007. Since then, Apple has annually released new iPhone models and iOS updates. As of November 1, 2018, more than 2.2 billion iPhones had been sold. As of 2022, the iPhone accounts for 15.6% of global smartphone market share
2015
Apple Watch
The Apple Watch is a line of smartwatches produced by Apple Inc. It incorporates fitness tracking, health-oriented capabilities, and wireless telecommunication, and integrates with iOS and other Apple products and services

Prev Table

Next Breadcrumbs

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

Do you like daisyUI? tweet about it!

Support daisyUI's development: Open Collective

Edit this page on GitHub

New template: SaaS Landing page

Available on daisyUI store

More details