How It Works Components for Webflow, Framer and Figma
Showcase your product's workflow with our "How It Works" components for Webflow, Framer, and Figma. Choose from various styles and customization options to create an informative, user-friendly section that enhances website clarity and engagement.
Stacked cards How it Works Section
Three stacked rounded cards, left-aligned process titles, bold headlines, clear subtext, spacious and minimalist three-step property journey layout..
Illustration cards How it Works Section
Four-card grid layout, left-aligned step titles and illustrations, green highlights, concise progress captions, minimalist, modern project workflow design..
Image cards How it Works Section
Three image cards in a row, bold step titles, green highlights, concise descriptions, minimal header, clear visual contest entry process..
Stepper Style How it Works Section
Three-column horizontal flow, large green icons, step titles, clear descriptions, headline, dotted line separator, minimalist onboarding process..
In Grid Headline How it Works Section
Left headline block, five soft-cornered step cards in grid, bold numbers, clear step titles, concise descriptions, clean modern progress flow..
Expandable Steps How it Works Section
Two-column layout, left bold headline and description, right stacked soft-cornered steps, clear numbers, concise details, minimalist insurance process design..
Four column How it Works Section
Four-column card layout, rounded boxes, numbered steps, bold titles, detailed descriptions, headline, split dark-light background for process clarity..
Split Layout How it Works Section
Split layout, left illustration, right step summary, bold blue headline, step navigation buttons, clean minimalist design for account opening process..
Three Step How it Works Section
Three-step horizontal layout, vibrant green numbers, bold step titles, process arrows, headline, concise descriptions, minimalist workflow breakdown..
Component Copied to Clipboard!
Component is ready to be pasted (Ctrl+V) into your project.
Uh-oh, Something’s gone wrong!
Don’t let this bug you Contact Us and we’ll squash it together!
Uh-oh, Something’s gone wrong!
Don’t let this bug you Contact Us and we’ll squash it together!
Unlock PRO
Level up your Framer and Webflow creations with our membership