Official daisyUI Figma Library is now available for designers!

Timeline

Timeline component shows a list of events in chronological order.

Class name		Type
timelineComponent 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-startComponent The content inside <li> that will be at the start direction
timeline-middleComponent The content inside <li> that will be at the middle
timeline-endComponent 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
  • 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.
  • 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
  • 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
  • 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
  • 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
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
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details
Please upgrade your browser