Ruler Scrub Timeline
A tick-mark ruler timeline built as a plain, fully editable Bricks tree: section > container > header (eyebrow, h2, intro) > toolbar (Auto-loop Yes/No toggle) > ruler track holding five "Milestone" component instances, eac…
50 sites for €79 only, Compare all plans
All photos and visual assets used in this preview are sourced from Unsplash.
The system behind it
One pattern, your whole brand.
Ruler Scrub Timeline reads your ACSS tokens, so changing a color, a font or a spacing value once restyles it everywhere. No hard-coded values, nothing to override.
- Type
- Component
- Category
- Interactive
- Responsive
- Desktop to phone
- Works with
- Bricks, ACSS, plain CSS
Options 3
Set on the section, in Bricks’ attributes panel. No code needed.
data-autoplayadvance to the next milestone automatically (also set live by the Auto-loop toggle)
data-delayms between automatic advances
data-loopwrap from the last milestone back to the first
Component props 1
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
year2022
labelFirst product
descriptionThe component library shipped as its own product, not just an interna…
linkLabelRead the story
linkHref#story
activeTrue
Included in Pro €99 once with Pro Unlimited Lifetime: all 785 patterns, unlimited sites.
Get Pro

Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 page






