2x2 benefit grid with embedded UI snippets
Feature grid where each card carries a tiny illustrative UI snippet instead of a plain icon, makes abstract features feel concrete. Best for product marketing where you have 4 clear, distinct capabilities to show. Swap each mini-mockup for something true to your own UI.
Live preview
open in new tab ↗<section class="cb-fg">
<div class="cb-fg-inner">
<span class="cb-eyebrow">Benefits</span>
<h2>Your all-purpose scheduling app</h2>
<div class="cb-fg-grid">
<div class="cb-fg-card">
<h3>Avoid meeting overload</h3>
<p>Only get booked when you want to. Set daily or monthly limits and add buffers around every event.</p>
<div class="cb-fg-ui">
<div class="cb-fg-row"><span>Minimum notice</span><span class="cb-fg-pill">30 min</span></div>
<div class="cb-fg-row"><span>Buffer before / after</span><span class="cb-fg-pill">15 min</span></div>
</div>
</div>
<div class="cb-fg-card">
<h3>Custom booking links</h3>
<p>Short, branded links your customers actually remember, no more complicated ones.</p>
<div class="cb-fg-ui cb-fg-link">yourbrand.com/jordan</div>
</div>
<div class="cb-fg-card">
<h3>Streamlined booker experience</h3>
<p>Let bookers see their own calendar next to yours so they never double book by accident.</p>
<div class="cb-fg-ui cb-fg-overlay">
<div class="cb-fg-track"></div>
<div class="cb-fg-track light"></div>
</div>
</div>
<div class="cb-fg-card">
<h3>Automated reminders</h3>
<p>Cut no-shows with automatic email and SMS reminders sent ahead of every booking.</p>
<div class="cb-fg-ui cb-fg-toast">✓ Booking confirmed</div>
</div>
</div>
</div>
</section>Block id: cal-com-feature-grid-mockup-2x2vanilla · code-required
More feature-grid 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.