📌 Version 1.0 This is the first generation of our components. Some may have minor alignment differences or use widgets that aren't perfectly matched to the content type. Even so, they provide a strong structural foundation and are very useful for quickly building any type of website. We're continuously improving them; future versions will be even more polished.
How It Works / Process
Step-by-step guides, timelines, and process flows
410 components - V3 300 · V4 110
📌 Version 1.0 This is the first generation of our components. Some may have minor alignment differences or use widgets that aren't perfectly matched to the content type. Even so, they provide a strong structural foundation and are very useful for quickly building any type of website. We're continuously improving them; future versions will be even more polished.
How It Works Layout Style 1 49
steps + testimonial (success story) with divider above
How It Works Layout Style 2 49
steps + testimonial (success story) with image placeholder
How It Works Layout Style 3 49
steps + testimonial (success story) with icon accents
How It Works Layout Style 4 49
steps + testimonial (success story) centered layout
How It Works Layout Style 5 49
steps + testimonial (success story) left-aligned layout
How It Works Layout Style 6 49
steps + testimonial (success story) 2-column variant
How It Works Layout Style 1 50
steps + testimonial (success story) 3-column variant
How It Works Layout Style 2 50
steps + testimonial (success story) compact variant
How It Works Layout Style 3 50
steps + testimonial (success story) spacious variant with extra padding
How It Works Layout Style 4 50
steps + testimonial (success story) with social-icons row
How It Works Layout Style 5 50
steps + testimonial (success story) with counter stat
How It Works Layout Style 6 50
steps + testimonial (success story) full-width layout
How It Works with 3-step Process Grid
3-step process grid
How It Works with 4-step Process Grid
4-step process grid
Centered How It Works with Subtitle, Numbered, and 3 Steps
3-steps numbered h+sub no-CTA tight
Centered How It Works with Subtitle, Numbered, CTA, and 3 Steps
3-steps numbered h+sub CTA tight
Centered How It Works with Heading Only, Numbered, and 3 Steps
3-steps numbered h-only no-CTA tight
Centered How It Works with Heading Only, Numbered, CTA, and 3 Steps
3-steps numbered h-only CTA tight
Centered How It Works with Badge, Numbered, and 3 Steps
3-steps numbered badge no-CTA tight
Centered How It Works with Badge, Numbered, CTA, and 3 Steps
3-steps numbered badge CTA tight
Centered How It Works with Subtitle and 3 Steps
3-steps icon h+sub no-CTA tight
Centered How It Works with Subtitle, CTA, and 3 Steps
3-steps icon h+sub CTA tight
Centered How It Works with Heading Only and 3 Steps
3-steps icon h-only no-CTA tight
Centered How It Works with Heading Only, CTA, and 3 Steps
3-steps icon h-only CTA tight