Process

15 templates in this category. Each page has the screenshots, the structure, what to change and the CSS variables.

• Process · Accordion timeline — A changelog card: version and date, a title and a short text, then an accordion whose entries hang from a vertical line, each with a circle and a tag (New, Fix).
• Process · Alternate timeline — A timeline whose cards take turns on each side of a centered line, with the date across the line, an icon on it and a row of photos in each card.
• Process · Cycle — A cycle of four steps around a ring with arrows, from the last step back to the first: continuous improvement.
• Process · Line carousel — A carousel of milestones on a line: a dot for each one, its year in a pill, a round photo and a short title.
• Process · Path — A wavy dashed path across the section, from one round photo to another: the steps sit on its crests and in its valleys, with their text above or below.
• Process · Public roadmap — A public roadmap in three columns, Now, Next and Later: each with a short note and a list of small cards with an area tag, a title that links to the item and one line.
• Process · Requirements — What to prepare before we start: three groups of checks (brand, content, access), each with why we need it, and a button to book the kickoff.
• Process · Road — Soft cards one under another, joined by round photos that rest on the left and right edges in turn, so the whole thing reads like a winding road.
• Process · Schedule — Three cards side by side, each with a timetable: the time in a chip, a dot on a line and the activity.
• Process · Steps on a line — Four steps in columns crossed by two thin lines that run to the edges of the screen, a brand dot on the lower one for each step.
• Process · Sticky steps — Numbered steps that stay in place while one photo per step slides up and lands on the one before, forming a stack; the line fills and each number lights up as its photo arrives.
• Process · Timeline links — A list of links on a line, on a light background.
• Process · Timeline slider — One large card per milestone (photo, date, title and text) with the next ones peeking at the sides, arrows, and a progress bar of years below: pick a year to jump to it.
• Process · Vertical story slider — A vertical slider with a photo behind each slide and a list of years on the left: pick a year or use the up and down arrows.
• Process · Year slider — Years in circles on a line: the active one large and filled in the center, its neighbors smaller with their year, the others just a dot.