Skip to content
C-138Component

Ruler Scrub Timeline

A tick-mark ruler timeline built as a plain, fully editable Etch tree: section > container > header (eyebrow, h2, intro) > toolbar (Auto-loop Yes/No toggle) > ruler track holding five "Milestone" component instances, eac…

Get this with ProIncluded in your plan

50 sites for €79 only, Compare all plans

Preview Desktop, 1280px

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
Etch, ACSS, plain CSS

Options 3

Set on the section, in Etch’s attributes panel. No code needed.

data-autoplay
truefalse

advance to the next milestone automatically (also set live by the Auto-loop toggle)

data-delay
numberdefault 2600

ms between automatic advances

data-loop
truefalse

wrap 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.

Milestone5 in this pattern · 6 props
PropTypeDefault
year
text

2022

label
text

First product

description
text

The component library shipped as its own product, not just an interna…

linkLabel
text

Read the story

linkHref
text

#story

active
true / false

True

Included in Pro From €39 a year, with all 469 patterns.

Get Pro

More patterns

Keep browsing.

L-000

Quick View

Desktop, 1440px
Pro
demo.etchedy.com

The real preview of this pattern. Every pattern adapts to your ACSS tokens.

Unlock with ProSee plansIncluded in your plan