Koala logo Design
No matches for “”
↑↓ navigate ↵ open Esc close
BrochureMockup step

Mockup step

One milestone row in a sequenced mock-up: it lights up at its step and turns into a tick one step later.

<koala-mockup-step>

Milestones with dates

A step reads the step counter of the nearest sequenced koala-mockup, so it only ever lives inside one. Before its turn the row is faded, at at its icon pulses, and one step later the icon becomes a tick and the detail fades in on the right. Spacing the steps two apart, as the Legal home does, gives each milestone a beat on its own before the next one lights. Under reduced motion the loop jumps straight to the end, so every row shows ticked.

Consecutive steps

Numbered one after another, each row ticks in the same beat as the next one lights, so the list runs down at a steady pace. Leave out detail when a date would say nothing, as on the case card of the Tech home.

Detail as a status

detail is any short note, not only a date. The Estate agents page uses it to mark each pre-emptive enquiry as prepared once it ticks.

API

at step number at which the row becomes current (default 1)
icon IconName shown until the row is ticked (default Circle)
label text
detail text, shown on the right once ticked
class merged onto the row