Steps
features · 10 variants · pages: home, landing, product, appnpx shadcn-vue@latest add @trame/landing-steps # Vue
npx shadcn@latest add @trame/landing-steps # React -
horizontal@trame/landing-steps--horizontal3 or 4 short steps along one line with numbered dots, a vertical rail on a phone: the quick how-it-works
-
vertical-rail@trame/landing-steps--vertical-rail4 to 6 steps with detail, a heading beside a rail of numbered badges and small time tags: a process to read
-
editorial-grid@trame/landing-steps--editorial-grid4 steps for a calm brand, oversized faint numerals in a two-column grid and no icons: a quiet method
-
cards@trame/landing-steps--cards2 or 3 simple steps as cards with an arrow from one to the next: buy in three moves
-
zigzag-mockup@trame/landing-steps--zigzag-mockupsteps that each have a picture or a screenshot, shown as rows on alternating sides: a visual walkthrough
-
deliverables@trame/landing-steps--deliverables3 to 5 stages of a service, each a wide row with its words beside what you get at its end: a process that ends each stage with something concrete
-
connected-media@trame/landing-steps--connected-media3 steps shown as pictures in one row joined by plus and arrow signs, words under each: a simple flow where each step has a screen
-
progress-bar@trame/landing-steps--progress-bara short flow in stages, a segmented bar with the duration of each: order, setup or delivery in 4 stages
-
staircase@trame/landing-steps--staircase4 or 5 stages of a service as one bold graphic: full-width bands deepening in the brand’s tints, the title at the left and a huge number that steps further right on each band
-
sticky-media@trame/landing-steps--sticky-media3 to 5 steps that each have their own picture: the heading and the picture of the step in view stay in place while the steps scroll beside them with oversized numbers