Here are some examples showcasing timelines.
Timelines are used to display a series of events in chronological order.
= 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")
The start
, middle_icon
, and end
properties can be customized. Or you
can provide a completely custom middle
block.
= 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
Create virtual credit / debit cards to keep your real info safe.
Get $5 when you sign up — free to start!
Everything you need to grow your business with confidence!
CRM, Lead Generation, Project Management, Contracts, Online Payments, and more!
The ads above are affiliate links to products I regularly use and highly
recommend.
I may receive a commission if you decide to purchase.