Three-step "how it works" cards
Onboarding explainer for any three-step process (setup, workflow, purchase flow). Works well right under a hero. Replace the step copy but keep the numbered-card rhythm, it reads as fast and low-effort to a visitor.
Live preview
open in new tab ↗<section class="cb-hiw">
<div class="cb-hiw-inner">
<span class="cb-eyebrow">How it works</span>
<h2>Getting set up is easy</h2>
<p class="cb-sub">Effortless setup for individuals, powerful enough for fast-growing teams.</p>
<div class="cb-hiw-grid">
<div class="cb-hiw-card">
<span class="cb-hiw-num">01</span>
<h3>Connect your calendar</h3>
<p>We handle the cross-referencing so you never have to worry about double bookings.</p>
</div>
<div class="cb-hiw-card">
<span class="cb-hiw-num">02</span>
<h3>Set your availability</h3>
<p>Want to block off weekends? Set up any buffers you like. We make that easy.</p>
</div>
<div class="cb-hiw-card">
<span class="cb-hiw-num">03</span>
<h3>Choose how to meet</h3>
<p>It could be a video call, phone call, or a walk in the park. You decide.</p>
</div>
</div>
</div>
</section>Block id: cal-com-how-it-works-3-stepvanilla · swap-content
More feature-list blocks
Want the whole site, not just the block?
We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.



