Timeline
Chronological event display with icons, timestamps, and content slots. Vertical style stacks events with a connector line for activity feeds and changelogs. Horizontal style scrolls left-to-right for project milestones and roadmaps.
Vertical
Stacked events with vertical connector line, icon dots, and timestamps.
_timeline.html.erb
███
████████ █████████ █ ████████ █████ █████████
██████
███ ██████ ███████████████████████████████ ██████ █
█ ██████ █████████ ██████ ████████████ ███████████ ██████████ █████████████ ██████████ █████ █████ █████ ███████ ████████ ████████ ██
█ ██████ ███ ████████ ████████████ ████████ ██████ ██████ ████ ███████ ██████████ ██ █████ █████ █████ ██████ ████████ █████ ██
█ ██████ ██████ ████████ ████████████ ███ ████████ ██████ ██ ████ ████ ██████████ ████████████ █████ ███████ ████████ ██████ ██
█ ██████ ████████ █████████ ████████████ ████████ ██████ █████████ ██████████ ████ ██ ██████ █████ ██████ ████████ ████████ █
█ ██
timeline_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████████ ███████████
██████ ██████ █ █
█████████ █ █████ ████████ ████████ █████ █
█
████████ █
██████████████████ █ ███████████████████
timeline_vertical_component.rb
█ ██████████████████████ ████
█████ █████████████████████████ █ ███████████████████
████████ █ █
████████ █ ████ █████████████ ███████████████████ █████ ███████████████ ████████████████████ ██
████████ █ ████ █████████████████ █████ ████████████████ █████████████████████████ ██
████████ █ ████ ███████████████ █████ ██████████████ ███████████████████████ ██
██████ █ ████ █████████████ █████ ████████████ █████████████████████ ██
█████ █ ████ ██████████████ █████ █████████████ ██████████████████████ █
████████
timeline_vertical_component.html.erb
████ ██████████ █████████████████ ███
██ ██ ████████████ ██
██████████████████████████
██ ███ ██
█
██ █████████████████████ ██ ██████ ██████ ██
██
███████ █ █████ ██ ████████████ █ █
████████████ █ ████████████ ██ █████ ██ ██████████████
██
timeline_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████████ ███████████
██████ ██████ █ █
█████████ █ █████ ████████ ████████ █████ █
█
████████ █
██████████████████ █ ███████████████████
Horizontal
Scrollable left-to-right timeline for milestones and roadmaps.
_timeline.html.erb
███
████████ █████████ █ ██████████ █████ █████████
██████
███ ██████ █████████████████████████████████ ██████ █
█ ██████ ███████████ ████████████ █████████████ ███████████ ██████████ ███ ██████ ████████ ████████ ██
█ ██████ █████████ ████████████ ██████ ███████ ███████████ ██████████ ███ ██████ ████████ ████████ ██
█ ██████ ██████████████ ████████████ █████ ████████ ██ ███████████ ██████████ ███ ██████ ████████ ████████ ██
█ ██████ ██████████ ████████████ ███ ███ ███ ████████ ██████████ ███ ██████ ████████ ████████ ██
█ ██████ █████████ ████████████ ███████ ██████████ ██████████ ███ ██████ ████████ ████████ █
timeline_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████████ ███████████
██████ ██████ █ █
█████████ █ █████ ████████ ████████ █████ █
█
████████ █
██████████████████ █ ███████████████████
timeline_horizontal_component.rb
█ ██████████████████████ ████
█████ ███████████████████████████ █ ███████████████████
████████ █ █
████████ █ ████ █████████████ ███████████████████ █████ ███████████████ ████████████████████ ██
████████ █ ████ █████████████████ █████ ████████████████ █████████████████████████ ██
████████ █ ████ ███████████████ █████ ██████████████ ███████████████████████ ██
██████ █ ████ █████████████ █████ ████████████ █████████████████████ ██
█████ █ ████ ██████████████ █████ █████████████ ██████████████████████ █
████████
timeline_horizontal_component.html.erb
████ ██████████ █████████████████ ████
████ ███████████ ███████████ ███████████
███ ██████████ █████████ ████ ██
████ ███████████████ █████ ██████ ███████ █████ ████████████ █████████████████████████
██ ██████████ ██ ██████ ██
████ ███████████████ ████ ████████ ████████████ ████ ██████████
███ ███ ██
████ ██████████ ████████████████ ████
██ ██ █████████████ ██
timeline_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████████ ███████████
██████ ██████ █ █
█████████ █ █████ ████████ ████████ █████ █
█
████████ █
██████████████████ █ ███████████████████
Changelog
- v1.0.0: Initial release with vertical and horizontal styles
Get Full Access
Unlock the source code for this component and all others. One-time payment for lifetime access.
Get Access Now