Waiting
Customize and export code (opens in a new tab)Compare designs
Each model builds its own version. Pick your favorite and customize it.
Desktop preview
See how each design looks on a full-width desktop screen. Mobile preview
Check how each design adapts to a small phone screen.
See how each design looks on a full-width desktop screen. Mobile preview
Check how each design adapts to a small phone screen.
How to create best how it works components?
Break down the real process. Provide the stages a customer follows, starting with their first action and ending with the outcome. Give each stage a short title and a concise explanation.
Make the sequence visible. Ask for numbered steps, a timeline, or an illustrated flow. Explain which stages need more detail and specify the direction the sequence should follow on mobile.
Check for missing transitions. Compare whether the next action is clear after each stage. Remove repeated explanations and make sure the final step reflects what the customer actually receives.
Examples of how it works components
Suncealand
Split-screen how-it-works section with numbered steps and podcast app preview
A marketing feature section with a left column containing an eyebrow label, serif heading, supporting text, three numbered steps, and a Learn more link, paired with a right-side illustrative mockup of a podcast player with audio controls and a notes panel. The outer component explains podcast distribution steps alongside an illustrative app screenshot.
Metis
Split Hero with Numbered Feature List
A two-column marketing section with a large bold heading, body paragraph, and blue Learn More button on the left, and three numbered feature items with headings and short descriptions on the right. Light background with blue accent circles for the numbers.
Solstice
How it works three-step card section
A centered marketing section titled "How it works" with three side-by-side outlined cards, each showing a dark step badge, heading, and short descriptive text. Faint placeholder graphics sit at the bottom of each card, suggesting an onboarding or process explainer.
Cronos
Split-Screen Feature Section with Photo and Numbered Points
A marketing feature section with a decorative photo of a woman working at a laptop on the left, overlaid with colored blocks, and a bold heading with a 2x2 grid of numbered points on the right. Each point has a number badge, a subheading, and placeholder body text.
Explore component generators
Generate any section of your website with the same multi-model workflow.
No categories match your search.
