📌 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 21
3 icon-box steps with arrow icons between spacious variant with extra padding
How It Works Layout Style 2 21
3 icon-box steps with arrow icons between with social-icons row
How It Works Layout Style 3 21
3 icon-box steps with arrow icons between with counter stat
How It Works Layout Style 4 21
3 icon-box steps with arrow icons between full-width layout
How It Works Layout Style 5 21
3 icon-box steps with arrow icons between narrow centered card style
How It Works Layout Style 6 21
3 icon-box steps with arrow icons between with divider below
How It Works Layout Style 1 22
3 icon-box steps with arrow icons between right-aligned layout
How It Works Layout Style 2 22
3 icon-box steps with arrow icons between 4-column variant
How It Works Layout Style 3 22
3 icon-box steps with arrow icons between with alert banner above
How It Works Layout Style 4 22
3 icon-box steps with arrow icons between with breadcrumb above
How It Works Layout Style 5 22
3 icon-box steps with arrow icons between minimal single-row
How It Works Layout Style 6 22
3 icon-box steps with arrow icons between with background container card
How It Works Layout Style 1 23
2 steps with large counter numbers + text
How It Works Layout Style 2 23
2 steps with large counter numbers + text with CTA button below
How It Works Layout Style 3 23
2 steps with large counter numbers + text with divider above
How It Works Layout Style 4 23
2 steps with large counter numbers + text with image placeholder
How It Works Layout Style 5 23
2 steps with large counter numbers + text with icon accents
How It Works Layout Style 6 23
2 steps with large counter numbers + text centered layout
How It Works Layout Style 1 24
2 steps with large counter numbers + text left-aligned layout
How It Works Layout Style 2 24
2 steps with large counter numbers + text 2-column variant
How It Works Layout Style 3 24
2 steps with large counter numbers + text 3-column variant
How It Works Layout Style 4 24
2 steps with large counter numbers + text compact variant
How It Works Layout Style 5 24
2 steps with large counter numbers + text spacious variant with extra padding
How It Works Layout Style 6 24
2 steps with large counter numbers + text with social-icons row