๐Ÿ“Œ 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:

๐Ÿ“Œ 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.

V3 Adaptive

How It Works Layout Style 1 33

3 steps with image placeholders right-aligned layout

headingtext-editor
V3 Adaptive

How It Works Layout Style 2 33

3 steps with image placeholders 4-column variant

headingtext-editor
V3 Adaptive

How It Works Layout Style 3 33

3 steps with image placeholders with alert banner above

headingtext-editor
V3 Adaptive

How It Works Layout Style 4 33

3 steps with image placeholders with breadcrumb above

headingtext-editor
V3 Adaptive

How It Works Layout Style 5 33

3 steps with image placeholders minimal single-row

headingtext-editor
V3 Adaptive

How It Works Layout Style 6 33

3 steps with image placeholders with background container card

headingtext-editor
V3 Adaptive

How It Works Layout Style 1 34

process flow: icons in a row with labels below

headingtext-editor
V3 Adaptive

How It Works Layout Style 2 34

process flow: icons in a row with labels below with CTA button below

headingtext-editor
V3 Adaptive

How It Works Layout Style 3 34

process flow: icons in a row with labels below with divider above

headingtext-editor
V3 Adaptive

How It Works Layout Style 4 34

process flow: icons in a row with labels below with image placeholder

headingtext-editor
V3 Adaptive

How It Works Layout Style 5 34

process flow: icons in a row with labels below with icon accents

headingtext-editor
V3 Adaptive

How It Works Layout Style 6 34

process flow: icons in a row with labels below centered layout

headingtext-editor
V3 Adaptive

How It Works Layout Style 1 35

process flow: icons in a row with labels below left-aligned layout

headingtext-editor
V3 Adaptive

How It Works Layout Style 2 35

process flow: icons in a row with labels below 2-column variant

headingtext-editor
V3 Adaptive

How It Works Layout Style 3 35

process flow: icons in a row with labels below 3-column variant

headingtext-editor
V3 Adaptive

How It Works Layout Style 4 35

process flow: icons in a row with labels below compact variant

headingtext-editor
V3 Adaptive

How It Works Layout Style 5 35

process flow: icons in a row with labels below spacious variant with extra padding

headingtext-editor
V3 Adaptive

How It Works Layout Style 6 35

process flow: icons in a row with labels below with social-icons row

headingtext-editor
V3 Adaptive

How It Works Layout Style 1 36

process flow: icons in a row with labels below with counter stat

headingtext-editor
V3 Adaptive

How It Works Layout Style 2 36

process flow: icons in a row with labels below full-width layout

headingtext-editor
V3 Adaptive

How It Works Layout Style 3 36

process flow: icons in a row with labels below narrow centered card style

headingtext-editor
V3 Adaptive

How It Works Layout Style 4 36

process flow: icons in a row with labels below with divider below

headingtext-editor
V3 Adaptive

How It Works Layout Style 5 36

process flow: icons in a row with labels below right-aligned layout

headingtext-editor
V3 Adaptive

How It Works Layout Style 6 36

process flow: icons in a row with labels below 4-column variant

headingtext-editor