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

steps + video (overview) above minimal single-row

headingtext-editor
V3 Adaptive

How It Works Layout Style 2 41

steps + video (overview) above with background container card

headingtext-editor
V3 Adaptive

How It Works Layout Style 3 41

steps + CTA (get started) below

headingtext-editor
V3 Adaptive

How It Works Layout Style 4 41

steps + CTA (get started) below with CTA button below

headingtext-editor
V3 Adaptive

How It Works Layout Style 5 41

steps + CTA (get started) below with divider above

headingtext-editor
V3 Adaptive

How It Works Layout Style 6 41

steps + CTA (get started) below with image placeholder

headingtext-editor
V3 Adaptive

How It Works Layout Style 1 42

steps + CTA (get started) below with icon accents

headingtext-editor
V3 Adaptive

How It Works Layout Style 2 42

steps + CTA (get started) below centered layout

headingtext-editor
V3 Adaptive

How It Works Layout Style 3 42

steps + CTA (get started) below left-aligned layout

headingtext-editor
V3 Adaptive

How It Works Layout Style 4 42

steps + CTA (get started) below 2-column variant

headingtext-editor
V3 Adaptive

How It Works Layout Style 5 42

steps + CTA (get started) below 3-column variant

headingtext-editor
V3 Adaptive

How It Works Layout Style 6 42

steps + CTA (get started) below compact variant

headingtext-editor
V3 Adaptive

How It Works Layout Style 1 43

steps + CTA (get started) below spacious variant with extra padding

headingtext-editor
V3 Adaptive

How It Works Layout Style 2 43

steps + CTA (get started) below with social-icons row

headingtext-editor
V3 Adaptive

How It Works Layout Style 3 43

steps + CTA (get started) below with counter stat

headingtext-editor
V3 Adaptive

How It Works Layout Style 4 43

steps + CTA (get started) below full-width layout

headingtext-editor
V3 Adaptive

How It Works Layout Style 5 43

steps + CTA (get started) below narrow centered card style

headingtext-editor
V3 Adaptive

How It Works Layout Style 6 43

steps + CTA (get started) below with divider below

headingtext-editor
V3 Adaptive

How It Works Layout Style 1 44

steps + CTA (get started) below right-aligned layout

headingtext-editor
V3 Adaptive

How It Works Layout Style 2 44

steps + CTA (get started) below 4-column variant

headingtext-editor
V3 Adaptive

How It Works Layout Style 3 44

steps + CTA (get started) below with alert banner above

headingtext-editor
V3 Adaptive

How It Works Layout Style 4 44

steps + CTA (get started) below with breadcrumb above

headingtext-editor
V3 Adaptive

How It Works Layout Style 5 44

steps + CTA (get started) below minimal single-row

headingtext-editor
V3 Adaptive

How It Works Layout Style 6 44

steps + CTA (get started) below with background container card

headingtext-editor