Visual sequences for displaying chronological events, progress updates, or step-by-step processes. Supports vertical and horizontal layouts with customizable markers and content sections.
Timelines are used to display a series of events in chronological order.
= daisy_timeline do |timeline|
- timeline.with_event(leading: "1985", middle_icon: "user-circle", trailing: "Topher Born")
- timeline.with_event(leading: "College", middle_icon: "academic-cap", trailing: "2006")
- timeline.with_event(leading: "2010", middle_icon: "cake", trailing: "Married Marnie")
- timeline.with_event(leading: "Built LocoMotion", middle_icon: "code-bracket", trailing: "2024")
The leading, middle_icon, and trailing properties can be customized. Or you
can provide a completely custom middle block.
= daisy_timeline do |timeline|
- timeline.with_event do |event|
- event.with_leading(css: "font-bold") do
1985
- event.with_middle do
= loco_icon("check-circle/solid")
- event.with_trailing(css: "timeline-box") do
Born
- timeline.with_event do |event|
- event.with_leading(css: "font-bold") do
2006
- event.with_middle do
= loco_icon("check-circle/solid")
- event.with_trailing(css: "timeline-box") do
Graduated College
- timeline.with_event do |event|
- event.with_leading(css: "font-bold") do
2010
- event.with_middle do
= loco_icon("check-circle/solid")
- event.with_trailing(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.