Process Steps Pro

Expandable process steps

About Process Steps

Process Steps is a process accordion for methodology sections. Two looks: Slider (badge, serif title, gradient accent, rounded steps) and Process (layered cinematic rows, large numbers, no radius). Dark, light and custom palettes. Top-left toggles dark/light. Demo bar switches look, radius, gap, glow and numbers — not theme. Five editable steps open one at a time. Built for interiors, agencies and product pages.

Two design languages in one component

Slider look with badge, accent line and halo

Accessible buttons, aria-expanded, visible focus

Static-safe motion, ResizeObserver and transitions

Use Cases

Architecture and interior design studios

Creative agency process pages

Product and SaaS methodology sections

Portfolio and personal branding sites

Construction and fit-out handover stories

Editorial and magazine-style layouts

Event and conference program pages

Hospitality and workplace project sites

Education and workshop landing pages

Brand and service explainer sections

Keywords

process steps framer, methodology accordion, how to section framer, expandable steps, process accordion, slider process look, cinematic process list, studio methodology, interior design process, framer how to component, step accordion, dark light process

Expandable process steps