Timelines

Here are some examples showcasing timelines.

Basic Timeline

Timelines are used to display a series of events in chronological order.

1985

Topher Born
College

2006
2010

Married Marnie
Built LocoMotion

2024

= daisy_timeline do |timeline|
  - timeline.with_event(start: "1985", middle_icon: "user-circle", end: "Topher Born")
  - timeline.with_event(start: "College", middle_icon: "academic-cap", end: "2006")
  - timeline.with_event(start: "2010", middle_icon: "cake", end: "Married Marnie")
  - timeline.with_event(start: "Built LocoMotion", middle_icon: "code-bracket", end: "2024")

Custom Timeline

The start, middle_icon, and end properties can be customized. Or you can provide a completely custom middle block.

Preview

1985

Born
2006

Graduated College
2010

Married

Code

= daisy_timeline do |timeline|
  - timeline.with_event do |event|
    - event.with_start(css: "font-bold") do
      1985
    - event.with_middle do
      = hero_icon("check-circle", variant: :solid)
    - event.with_end(css: "timeline-box") do
      Born

  - timeline.with_event do |event|
    - event.with_start(css: "font-bold") do
      2006
    - event.with_middle do
      = hero_icon("check-circle", variant: :solid)
    - event.with_end(css: "timeline-box") do
      Graduated College

  - timeline.with_event do |event|
    - event.with_start(css: "font-bold") do
      2010
    - event.with_middle do
      = hero_icon("check-circle", variant: :solid)
    - event.with_end(css: "timeline-box") do
      Married

Made with by Profoundry .