Process

Each koala-process-step takes a short title and a sentence of copy, and numbers itself in source order. The steps stack on phones, sit two to a row from sm and four from lg. Keep a process to three or four steps; a longer journey belongs in the product, not on the brochure.

columns="3" sets three steps to a row from lg and keeps them stacked below it. The cards keep their own surface, so a process reads on a Primary band as it does on the page.

sequence lights the steps up in turn: a comma-separated list of milliseconds to wait before each step, one entry per step. The lit step lifts onto the brand container and every number up to it turns solid. rest holds the last step before the highlight starts again from the first. It needs mockup-sequence.js, and under reduced motion the cards do not lift.