<div><span class="lbl">Three-up grid with a centred heading</span>
<section class="ig" aria-labelledby="ig-plan">
<div class="ig-head">
<p class="ig-eyebrow">Plotline for product teams</p>
<h2 class="ig-title" id="ig-plan">Plan the quarter, then actually ship it</h2>
<p class="ig-lead">Six things Plotline does so your Monday stand-up takes ten minutes instead of forty.</p>
</div>
<ul class="ig-three">
<li><span class="ig-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg></span><h3>Roadmaps that move with you</h3><p>Drag a milestone and every dependent task, owner and due date shifts with it.</p></li>
<li><span class="ig-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg></span><h3>Workload at a glance</h3><p>See who is over capacity next week before anyone has to say it in a meeting.</p></li>
<li><span class="ig-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></span><h3>Quiet notifications</h3><p>One digest at 9am instead of forty pings. Urgent blockers still come through straight away.</p></li>
<li><span class="ig-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M3 3v18h18"/><path d="M7 16v-5M12 16V8M17 16V6"/></svg></span><h3>Burn-up charts built in</h3><p>Scope creep shows up as a rising line, so the conversation happens in week two, not week ten.</p></li>
<li><span class="ig-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></span><h3>Decisions next to the work</h3><p>Threads live on the task, and resolved decisions are pinned for whoever picks it up next.</p></li>
<li><span class="ig-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg></span><h3>Two-way Git sync</h3><p>Merged pull requests close their tasks, and status changes post back to the review.</p></li>
</ul>
</section></div>
<div><span class="lbl">Four-up cards with a link on each</span>
<section class="ig" aria-labelledby="ig-secure">
<div class="ig-top">
<div>
<p class="ig-eyebrow">Vaultline security</p>
<h2 class="ig-title" id="ig-secure">Security your auditors will sign off on</h2>
<p class="ig-lead">Vaultline was built for regulated teams first. These four controls are on for every plan.</p>
</div>
<a class="ig-more" href="#">Read the security whitepaper <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M13 5l7 7-7 7"/></svg></a>
</div>
<ul class="ig-four">
<li class="ig-card"><span class="ig-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg></span><h3>Zero-knowledge encryption</h3><p>Files are encrypted on your device with AES-256 before they leave it. We never hold the keys.</p><a class="ig-more" href="#">How encryption works <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M13 5l7 7-7 7"/></svg></a></li>
<li class="ig-card"><span class="ig-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="7.5" cy="15.5" r="4.5"/><path d="m21 2-9.6 9.6M15.5 7.5l3 3L22 7l-3-3"/></svg></span><h3>Single sign-on and SCIM</h3><p>Connect your identity provider and create or remove accounts automatically as people join and leave.</p><a class="ig-more" href="#">Set up single sign-on <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M13 5l7 7-7 7"/></svg></a></li>
<li class="ig-card"><span class="ig-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></span><h3>An audit log for every file</h3><p>Who opened, downloaded or shared what, when and from where, exported to your SIEM every night.</p><a class="ig-more" href="#">See a sample audit log <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M13 5l7 7-7 7"/></svg></a></li>
<li class="ig-card"><span class="ig-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg></span><h3>Choose your data region</h3><p>Keep files in the EU, the UK, the US or Australia. They are stored and backed up only there.</p><a class="ig-more" href="#">Compare data regions <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M13 5l7 7-7 7"/></svg></a></li>
</ul>
</section></div>
<div><span class="lbl">Split: heading and action beside an icon list</span>
<section class="ig ig-split" aria-labelledby="ig-clinic">
<div>
<p class="ig-eyebrow">Mendwell for clinics</p>
<h2 class="ig-title" id="ig-clinic">The front desk, handled</h2>
<p class="ig-lead">Mendwell takes bookings, reminders and intake forms off your reception team, so they can look after the people in the waiting room.</p>
<a class="ig-btn" href="#">Book a 20-minute demo <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M13 5l7 7-7 7"/></svg></a>
<p class="ig-note">Used by 380 physiotherapy and osteopathy clinics.</p>
</div>
<ul class="ig-list">
<li><span class="ig-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></span><h3>Online booking around the clock</h3><p>Patients pick a slot from your real diary at 11pm, when they actually think about it.</p></li>
<li><span class="ig-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="5" y="2" width="14" height="20" rx="2"/><path d="M12 18h.01"/></svg></span><h3>Text reminders</h3><p>An automatic reminder 24 hours ahead cut no-shows by a third at our pilot clinics.</p></li>
<li><span class="ig-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg></span><h3>Intake forms before the visit</h3><p>Medical history arrives with the booking, not on a clipboard in the waiting room.</p></li>
<li><span class="ig-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></span><h3>Records kept private</h3><p>Notes are encrypted at rest and every view is logged against the practitioner.</p></li>
</ul>
</section></div>
CSS
/* Icon grid feature sections. Each is a <section> named by its h2, with the features in a <ul>:
an inline SVG icon (aria-hidden), an h3 and one sentence. CSS grid sets the column count. */
.ig{--ig-ink:#0f172a;--ig-muted:#475569;--ig-accent:#1d4ed8;--ig-accent-hover:#1e3a8a;--ig-tint:#dbeafe;--ig-line:#e2e8f0;--ig-bg:#fff;--ig-radius:24px;
background:var(--ig-bg);color:var(--ig-ink);border-radius:var(--ig-radius);padding:clamp(40px,6vw,80px) clamp(20px,5vw,64px);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.55}
.ig :where(h2,h3,p,ul){margin:0;padding:0}
.ig ul{list-style:none}
.ig a{color:var(--ig-accent);text-decoration:none;font-weight:600}
.ig a:hover{color:var(--ig-accent-hover)}
.ig a:focus-visible{outline:3px solid var(--ig-accent);outline-offset:3px;border-radius:6px}
.ig-eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ig-accent)}
.ig-title{margin-top:12px!important;font-size:clamp(1.75rem,1.2rem + 2vw,2.6rem);line-height:1.12;letter-spacing:-.025em;font-weight:800}
.ig-lead{margin-top:14px!important;max-width:60ch;font-size:1.08rem;color:var(--ig-muted)}
.ig-icon{display:inline-grid;place-items:center;flex:none;width:48px;height:48px;border-radius:14px;background:var(--ig-tint);color:var(--ig-accent)}
.ig-icon svg{width:24px;height:24px}
.ig h3{margin-top:18px;font-size:1.08rem;line-height:1.35;font-weight:700}
.ig h3+p{margin-top:8px;font-size:.98rem;color:var(--ig-muted)}
/* 1. three-up, centred */
.ig-head{max-width:680px;margin:0 auto;text-align:center}
.ig-head .ig-lead{margin-inline:auto}
.ig-three{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 40px;margin-top:56px!important;text-align:center}
.ig-three li{max-width:340px;margin-inline:auto}
/* 2. four-up cards with a link */
.ig-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px}
.ig-top .ig-more{margin-top:0}
.ig-four{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px!important}
.ig-card{display:flex;flex-direction:column;align-items:flex-start;padding:26px 24px;border:1px solid var(--ig-line);border-radius:18px;background:#f8fafc;
transition:border-color .2s,box-shadow .2s,transform .2s}
.ig-card:hover,.ig-card:focus-within{border-color:#93c5fd;box-shadow:0 18px 40px -24px rgba(29,78,216,.45);transform:translateY(-2px)}
.ig-card .ig-icon{border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px #bfdbfe}
.ig-card h3+p{flex:1}
.ig-more{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-size:.94rem}
.ig-more svg{width:16px;height:16px;transition:transform .2s}
.ig-more:hover svg{transform:translateX(3px)}
/* 3. split: heading and action beside a two-column icon list */
.ig-split{display:grid;grid-template-columns:5fr 7fr;gap:clamp(36px,6vw,80px);align-items:start}
.ig .ig-btn{display:inline-flex;align-items:center;gap:8px;margin-top:28px;min-height:48px;padding:0 22px;border-radius:12px;background:var(--ig-accent);color:#fff;transition:background .2s}
.ig .ig-btn:hover{background:var(--ig-accent-hover);color:#fff}
.ig-btn svg{width:18px;height:18px}
.ig-note{margin-top:16px!important;font-size:.9rem;color:var(--ig-muted)}
.ig-list{display:grid;grid-template-columns:repeat(2,1fr);gap:36px 32px}
.ig-list li{display:grid;grid-template-columns:auto 1fr;align-content:start;column-gap:16px}
.ig-list .ig-icon{grid-row:span 2;width:44px;height:44px;border-radius:12px}
.ig-list h3{margin-top:0;padding-top:2px}
.ig-list h3+p{margin-top:6px}
@media (max-width:991px){
.ig-three{grid-template-columns:repeat(2,1fr)}
.ig-four{grid-template-columns:repeat(2,1fr)}
.ig-split{grid-template-columns:1fr}
}
@media (max-width:575px){
.ig-three,.ig-four,.ig-list{grid-template-columns:1fr}
.ig-three{gap:40px}
}
@media (prefers-reduced-motion:reduce){
.ig *{transition:none!important}
.ig-card:hover,.ig-card:focus-within{transform:none}
}
Bootstrap 5 code
Requires: Bootstrap 5.3.8 CSS
HTML
<div><span class="lbl">Three-up grid with a centred heading</span>
<section class="ig" aria-labelledby="ig-plan">
<div class="mx-auto text-center" style="max-width:680px">
<p class="ig-eyebrow">Plotline for product teams</p>
<h2 class="ig-title" id="ig-plan">Plan the quarter, then actually ship it</h2>
<p class="ig-lead mx-auto">Six things Plotline does so your Monday stand-up takes ten minutes instead of forty.</p>
</div>
<ul class="ig-three list-unstyled row row-cols-1 row-cols-sm-2 row-cols-lg-3 gx-5 gy-5 mt-5 mb-0 text-center">
<li class="col mx-auto"><span class="ig-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg></span><h3>Roadmaps that move with you</h3><p>Drag a milestone and every dependent task, owner and due date shifts with it.</p></li>
<li class="col mx-auto"><span class="ig-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg></span><h3>Workload at a glance</h3><p>See who is over capacity next week before anyone has to say it in a meeting.</p></li>
<li class="col mx-auto"><span class="ig-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></span><h3>Quiet notifications</h3><p>One digest at 9am instead of forty pings. Urgent blockers still come through straight away.</p></li>
<li class="col mx-auto"><span class="ig-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M3 3v18h18"/><path d="M7 16v-5M12 16V8M17 16V6"/></svg></span><h3>Burn-up charts built in</h3><p>Scope creep shows up as a rising line, so the conversation happens in week two, not week ten.</p></li>
<li class="col mx-auto"><span class="ig-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></span><h3>Decisions next to the work</h3><p>Threads live on the task, and resolved decisions are pinned for whoever picks it up next.</p></li>
<li class="col mx-auto"><span class="ig-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg></span><h3>Two-way Git sync</h3><p>Merged pull requests close their tasks, and status changes post back to the review.</p></li>
</ul>
</section></div>
<div><span class="lbl">Four-up cards with a link on each</span>
<section class="ig" aria-labelledby="ig-secure">
<div class="d-flex flex-wrap align-items-end justify-content-between column-gap-5 row-gap-3">
<div>
<p class="ig-eyebrow">Vaultline security</p>
<h2 class="ig-title" id="ig-secure">Security your auditors will sign off on</h2>
<p class="ig-lead">Vaultline was built for regulated teams first. These four controls are on for every plan.</p>
</div>
<a class="ig-more" href="#">Read the security whitepaper <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M13 5l7 7-7 7"/></svg></a>
</div>
<ul class="list-unstyled row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3 mt-5 mb-0">
<li class="col"><div class="card h-100"><div class="card-body d-flex flex-column align-items-start"><span class="ig-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg></span><h3>Zero-knowledge encryption</h3><p class="flex-grow-1">Files are encrypted on your device with AES-256 before they leave it. We never hold the keys.</p><a class="ig-more mt-3" href="#">How encryption works <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M13 5l7 7-7 7"/></svg></a></div></div></li>
<li class="col"><div class="card h-100"><div class="card-body d-flex flex-column align-items-start"><span class="ig-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="7.5" cy="15.5" r="4.5"/><path d="m21 2-9.6 9.6M15.5 7.5l3 3L22 7l-3-3"/></svg></span><h3>Single sign-on and SCIM</h3><p class="flex-grow-1">Connect your identity provider and create or remove accounts automatically as people join and leave.</p><a class="ig-more mt-3" href="#">Set up single sign-on <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M13 5l7 7-7 7"/></svg></a></div></div></li>
<li class="col"><div class="card h-100"><div class="card-body d-flex flex-column align-items-start"><span class="ig-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></span><h3>An audit log for every file</h3><p class="flex-grow-1">Who opened, downloaded or shared what, when and from where, exported to your SIEM every night.</p><a class="ig-more mt-3" href="#">See a sample audit log <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M13 5l7 7-7 7"/></svg></a></div></div></li>
<li class="col"><div class="card h-100"><div class="card-body d-flex flex-column align-items-start"><span class="ig-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg></span><h3>Choose your data region</h3><p class="flex-grow-1">Keep files in the EU, the UK, the US or Australia. They are stored and backed up only there.</p><a class="ig-more mt-3" href="#">Compare data regions <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M13 5l7 7-7 7"/></svg></a></div></div></li>
</ul>
</section></div>
<div><span class="lbl">Split: heading and action beside an icon list</span>
<section class="ig" aria-labelledby="ig-clinic">
<div class="row gx-5 gy-5">
<div class="col-lg-5">
<p class="ig-eyebrow">Mendwell for clinics</p>
<h2 class="ig-title" id="ig-clinic">The front desk, handled</h2>
<p class="ig-lead">Mendwell takes bookings, reminders and intake forms off your reception team, so they can look after the people in the waiting room.</p>
<a class="btn btn-primary ig-btn mt-4" href="#">Book a 20-minute demo <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M13 5l7 7-7 7"/></svg></a>
<p class="ig-note mt-3">Used by 380 physiotherapy and osteopathy clinics.</p>
</div>
<div class="col-lg-7">
<ul class="ig-list list-unstyled row row-cols-1 row-cols-sm-2 gx-4 gy-5 mb-0">
<li class="col d-flex gap-3"><span class="ig-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></span><div><h3>Online booking around the clock</h3><p>Patients pick a slot from your real diary at 11pm, when they actually think about it.</p></div></li>
<li class="col d-flex gap-3"><span class="ig-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="5" y="2" width="14" height="20" rx="2"/><path d="M12 18h.01"/></svg></span><div><h3>Text reminders</h3><p>An automatic reminder 24 hours ahead cut no-shows by a third at our pilot clinics.</p></div></li>
<li class="col d-flex gap-3"><span class="ig-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg></span><div><h3>Intake forms before the visit</h3><p>Medical history arrives with the booking, not on a clipboard in the waiting room.</p></div></li>
<li class="col d-flex gap-3"><span class="ig-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></span><div><h3>Records kept private</h3><p>Notes are encrypted at rest and every view is logged against the practitioner.</p></div></li>
</ul>
</div>
</div>
</section></div>
CSS
/* Icon grid feature sections in Bootstrap 5: .row / .row-cols-* for the columns, .card for the linked cards,
.btn for the action and .list-unstyled lists. This block adds the palette, the icon tiles and the type scale. */
.ig{--ig-ink:#0f172a;--ig-muted:#475569;--ig-accent:#1d4ed8;--ig-accent-hover:#1e3a8a;--ig-tint:#dbeafe;--ig-line:#e2e8f0;--ig-radius:24px;
--bs-link-color-rgb:29,78,216;--bs-link-hover-color-rgb:30,58,138;
background:#fff;color:var(--ig-ink);border-radius:var(--ig-radius);padding:clamp(40px,6vw,80px) clamp(20px,5vw,64px);line-height:1.55}
.ig :where(h2,h3,p){margin:0}
.ig a:not(.btn){text-decoration:none;font-weight:600}
.ig a:focus-visible{outline:3px solid var(--ig-accent);outline-offset:3px;border-radius:6px;box-shadow:none}
.ig-eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ig-accent)}
.ig-title{margin-top:12px!important;font-size:clamp(1.75rem,1.2rem + 2vw,2.6rem);line-height:1.12;letter-spacing:-.025em;font-weight:800}
.ig-lead{margin-top:14px!important;max-width:60ch;font-size:1.08rem;color:var(--ig-muted)}
.ig-icon{display:inline-grid;place-items:center;flex:none;width:48px;height:48px;border-radius:14px;background:var(--ig-tint);color:var(--ig-accent)}
.ig-icon svg{width:24px;height:24px}
.ig h3{margin-top:18px;font-size:1.08rem;line-height:1.35;font-weight:700}
.ig h3+p{margin-top:8px;font-size:.98rem;color:var(--ig-muted)}
.ig-three li{max-width:340px}
.ig .card{--bs-card-border-color:var(--ig-line);--bs-card-border-radius:18px;--bs-card-bg:#f8fafc;--bs-card-spacer-x:24px;--bs-card-spacer-y:26px;
transition:border-color .2s,box-shadow .2s,transform .2s}
.ig .card:hover,.ig .card:focus-within{border-color:#93c5fd;box-shadow:0 18px 40px -24px rgba(29,78,216,.45);transform:translateY(-2px)}
.ig .card .ig-icon{border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px #bfdbfe}
.ig-more{display:inline-flex;align-items:center;gap:6px;font-size:.94rem}
.ig-more svg{width:16px;height:16px;transition:transform .2s}
.ig-more:hover svg{transform:translateX(3px)}
.ig-btn{--bs-btn-bg:var(--ig-accent);--bs-btn-border-color:var(--ig-accent);--bs-btn-hover-bg:var(--ig-accent-hover);--bs-btn-hover-border-color:var(--ig-accent-hover);
--bs-btn-active-bg:var(--ig-accent-hover);--bs-btn-active-border-color:var(--ig-accent-hover);--bs-btn-padding-x:22px;--bs-btn-font-weight:600;--bs-btn-border-radius:12px;
display:inline-flex;align-items:center;gap:8px;min-height:48px}
.ig-btn svg{width:18px;height:18px}
.ig-note{font-size:.9rem;color:var(--ig-muted)}
.ig-list .ig-icon{width:44px;height:44px;border-radius:12px}
.ig-list h3{margin-top:0;padding-top:2px}
.ig-list h3+p{margin-top:6px}
@media (prefers-reduced-motion:reduce){
.ig *{transition:none!important}
.ig .card:hover,.ig .card:focus-within{transform:none}
}
Tailwind 4 code
Requires: Tailwind CSS 4
HTML
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#4b5567] uppercase">Three-up grid with a centred heading</span>
<section class="rounded-3xl bg-white px-[clamp(20px,5vw,64px)] py-[clamp(40px,6vw,80px)] leading-[1.55] text-[#0f172a]" aria-labelledby="t-ig-plan">
<div class="mx-auto max-w-[680px] text-center">
<p class="text-[.8rem] font-bold tracking-[.12em] text-[#1d4ed8] uppercase">Plotline for product teams</p>
<h2 class="mt-3 text-[clamp(1.75rem,1.2rem+2vw,2.6rem)] leading-[1.12] font-extrabold tracking-[-.025em]" id="t-ig-plan">Plan the quarter, then actually ship it</h2>
<p class="mt-3.5 max-w-[60ch] text-[1.08rem] text-[#475569] mx-auto">Six things Plotline does so your Monday stand-up takes ten minutes instead of forty.</p>
</div>
<ul class="mt-14 grid grid-cols-1 gap-10 text-center sm:grid-cols-2 sm:gap-x-10 sm:gap-y-12 lg:grid-cols-3">
<li class="mx-auto max-w-[340px]"><span class="inline-grid flex-none place-items-center text-[#1d4ed8] size-12 rounded-[14px] bg-[#dbeafe]"><svg class="size-6" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg></span><h3 class="mt-[18px] text-[1.08rem] leading-[1.35] font-bold">Roadmaps that move with you</h3><p class="mt-2 text-[.98rem] text-[#475569]">Drag a milestone and every dependent task, owner and due date shifts with it.</p></li>
<li class="mx-auto max-w-[340px]"><span class="inline-grid flex-none place-items-center text-[#1d4ed8] size-12 rounded-[14px] bg-[#dbeafe]"><svg class="size-6" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg></span><h3 class="mt-[18px] text-[1.08rem] leading-[1.35] font-bold">Workload at a glance</h3><p class="mt-2 text-[.98rem] text-[#475569]">See who is over capacity next week before anyone has to say it in a meeting.</p></li>
<li class="mx-auto max-w-[340px]"><span class="inline-grid flex-none place-items-center text-[#1d4ed8] size-12 rounded-[14px] bg-[#dbeafe]"><svg class="size-6" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></span><h3 class="mt-[18px] text-[1.08rem] leading-[1.35] font-bold">Quiet notifications</h3><p class="mt-2 text-[.98rem] text-[#475569]">One digest at 9am instead of forty pings. Urgent blockers still come through straight away.</p></li>
<li class="mx-auto max-w-[340px]"><span class="inline-grid flex-none place-items-center text-[#1d4ed8] size-12 rounded-[14px] bg-[#dbeafe]"><svg class="size-6" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M3 3v18h18"/><path d="M7 16v-5M12 16V8M17 16V6"/></svg></span><h3 class="mt-[18px] text-[1.08rem] leading-[1.35] font-bold">Burn-up charts built in</h3><p class="mt-2 text-[.98rem] text-[#475569]">Scope creep shows up as a rising line, so the conversation happens in week two, not week ten.</p></li>
<li class="mx-auto max-w-[340px]"><span class="inline-grid flex-none place-items-center text-[#1d4ed8] size-12 rounded-[14px] bg-[#dbeafe]"><svg class="size-6" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></span><h3 class="mt-[18px] text-[1.08rem] leading-[1.35] font-bold">Decisions next to the work</h3><p class="mt-2 text-[.98rem] text-[#475569]">Threads live on the task, and resolved decisions are pinned for whoever picks it up next.</p></li>
<li class="mx-auto max-w-[340px]"><span class="inline-grid flex-none place-items-center text-[#1d4ed8] size-12 rounded-[14px] bg-[#dbeafe]"><svg class="size-6" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg></span><h3 class="mt-[18px] text-[1.08rem] leading-[1.35] font-bold">Two-way Git sync</h3><p class="mt-2 text-[.98rem] text-[#475569]">Merged pull requests close their tasks, and status changes post back to the review.</p></li>
</ul>
</section></div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#4b5567] uppercase">Four-up cards with a link on each</span>
<section class="rounded-3xl bg-white px-[clamp(20px,5vw,64px)] py-[clamp(40px,6vw,80px)] leading-[1.55] text-[#0f172a]" aria-labelledby="t-ig-secure">
<div class="flex flex-wrap items-end justify-between gap-x-8 gap-y-4">
<div>
<p class="text-[.8rem] font-bold tracking-[.12em] text-[#1d4ed8] uppercase">Vaultline security</p>
<h2 class="mt-3 text-[clamp(1.75rem,1.2rem+2vw,2.6rem)] leading-[1.12] font-extrabold tracking-[-.025em]" id="t-ig-secure">Security your auditors will sign off on</h2>
<p class="mt-3.5 max-w-[60ch] text-[1.08rem] text-[#475569]">Vaultline was built for regulated teams first. These four controls are on for every plan.</p>
</div>
<a class="group inline-flex items-center gap-1.5 rounded-md text-[.94rem] font-semibold text-[#1d4ed8] hover:text-[#1e3a8a] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#1d4ed8]" href="#">Read the security whitepaper <svg class="size-4 transition-transform duration-200 group-hover:translate-x-[3px] motion-reduce:transition-none" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M13 5l7 7-7 7"/></svg></a>
</div>
<ul class="mt-11 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
<li class="flex flex-col items-start rounded-[18px] border border-[#e2e8f0] bg-[#f8fafc] px-6 py-[26px] transition duration-200 hover:-translate-y-0.5 hover:border-[#93c5fd] hover:shadow-[0_18px_40px_-24px_rgba(29,78,216,.45)] focus-within:-translate-y-0.5 focus-within:border-[#93c5fd] focus-within:shadow-[0_18px_40px_-24px_rgba(29,78,216,.45)] motion-reduce:transition-none motion-reduce:hover:translate-y-0 motion-reduce:focus-within:translate-y-0"><span class="inline-grid flex-none place-items-center text-[#1d4ed8] size-12 rounded-full bg-white shadow-[inset_0_0_0_1px_#bfdbfe]"><svg class="size-6" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg></span><h3 class="mt-[18px] text-[1.08rem] leading-[1.35] font-bold">Zero-knowledge encryption</h3><p class="mt-2 text-[.98rem] text-[#475569] flex-1">Files are encrypted on your device with AES-256 before they leave it. We never hold the keys.</p><a class="group inline-flex items-center gap-1.5 rounded-md text-[.94rem] font-semibold text-[#1d4ed8] hover:text-[#1e3a8a] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#1d4ed8] mt-[18px]" href="#">How encryption works <svg class="size-4 transition-transform duration-200 group-hover:translate-x-[3px] motion-reduce:transition-none" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M13 5l7 7-7 7"/></svg></a></li>
<li class="flex flex-col items-start rounded-[18px] border border-[#e2e8f0] bg-[#f8fafc] px-6 py-[26px] transition duration-200 hover:-translate-y-0.5 hover:border-[#93c5fd] hover:shadow-[0_18px_40px_-24px_rgba(29,78,216,.45)] focus-within:-translate-y-0.5 focus-within:border-[#93c5fd] focus-within:shadow-[0_18px_40px_-24px_rgba(29,78,216,.45)] motion-reduce:transition-none motion-reduce:hover:translate-y-0 motion-reduce:focus-within:translate-y-0"><span class="inline-grid flex-none place-items-center text-[#1d4ed8] size-12 rounded-full bg-white shadow-[inset_0_0_0_1px_#bfdbfe]"><svg class="size-6" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="7.5" cy="15.5" r="4.5"/><path d="m21 2-9.6 9.6M15.5 7.5l3 3L22 7l-3-3"/></svg></span><h3 class="mt-[18px] text-[1.08rem] leading-[1.35] font-bold">Single sign-on and SCIM</h3><p class="mt-2 text-[.98rem] text-[#475569] flex-1">Connect your identity provider and create or remove accounts automatically as people join and leave.</p><a class="group inline-flex items-center gap-1.5 rounded-md text-[.94rem] font-semibold text-[#1d4ed8] hover:text-[#1e3a8a] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#1d4ed8] mt-[18px]" href="#">Set up single sign-on <svg class="size-4 transition-transform duration-200 group-hover:translate-x-[3px] motion-reduce:transition-none" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M13 5l7 7-7 7"/></svg></a></li>
<li class="flex flex-col items-start rounded-[18px] border border-[#e2e8f0] bg-[#f8fafc] px-6 py-[26px] transition duration-200 hover:-translate-y-0.5 hover:border-[#93c5fd] hover:shadow-[0_18px_40px_-24px_rgba(29,78,216,.45)] focus-within:-translate-y-0.5 focus-within:border-[#93c5fd] focus-within:shadow-[0_18px_40px_-24px_rgba(29,78,216,.45)] motion-reduce:transition-none motion-reduce:hover:translate-y-0 motion-reduce:focus-within:translate-y-0"><span class="inline-grid flex-none place-items-center text-[#1d4ed8] size-12 rounded-full bg-white shadow-[inset_0_0_0_1px_#bfdbfe]"><svg class="size-6" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></span><h3 class="mt-[18px] text-[1.08rem] leading-[1.35] font-bold">An audit log for every file</h3><p class="mt-2 text-[.98rem] text-[#475569] flex-1">Who opened, downloaded or shared what, when and from where, exported to your SIEM every night.</p><a class="group inline-flex items-center gap-1.5 rounded-md text-[.94rem] font-semibold text-[#1d4ed8] hover:text-[#1e3a8a] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#1d4ed8] mt-[18px]" href="#">See a sample audit log <svg class="size-4 transition-transform duration-200 group-hover:translate-x-[3px] motion-reduce:transition-none" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M13 5l7 7-7 7"/></svg></a></li>
<li class="flex flex-col items-start rounded-[18px] border border-[#e2e8f0] bg-[#f8fafc] px-6 py-[26px] transition duration-200 hover:-translate-y-0.5 hover:border-[#93c5fd] hover:shadow-[0_18px_40px_-24px_rgba(29,78,216,.45)] focus-within:-translate-y-0.5 focus-within:border-[#93c5fd] focus-within:shadow-[0_18px_40px_-24px_rgba(29,78,216,.45)] motion-reduce:transition-none motion-reduce:hover:translate-y-0 motion-reduce:focus-within:translate-y-0"><span class="inline-grid flex-none place-items-center text-[#1d4ed8] size-12 rounded-full bg-white shadow-[inset_0_0_0_1px_#bfdbfe]"><svg class="size-6" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg></span><h3 class="mt-[18px] text-[1.08rem] leading-[1.35] font-bold">Choose your data region</h3><p class="mt-2 text-[.98rem] text-[#475569] flex-1">Keep files in the EU, the UK, the US or Australia. They are stored and backed up only there.</p><a class="group inline-flex items-center gap-1.5 rounded-md text-[.94rem] font-semibold text-[#1d4ed8] hover:text-[#1e3a8a] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#1d4ed8] mt-[18px]" href="#">Compare data regions <svg class="size-4 transition-transform duration-200 group-hover:translate-x-[3px] motion-reduce:transition-none" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M13 5l7 7-7 7"/></svg></a></li>
</ul>
</section></div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#4b5567] uppercase">Split: heading and action beside an icon list</span>
<section class="rounded-3xl bg-white px-[clamp(20px,5vw,64px)] py-[clamp(40px,6vw,80px)] leading-[1.55] text-[#0f172a] grid grid-cols-1 items-start gap-[clamp(36px,6vw,80px)] lg:grid-cols-[5fr_7fr]" aria-labelledby="t-ig-clinic">
<div>
<p class="text-[.8rem] font-bold tracking-[.12em] text-[#1d4ed8] uppercase">Mendwell for clinics</p>
<h2 class="mt-3 text-[clamp(1.75rem,1.2rem+2vw,2.6rem)] leading-[1.12] font-extrabold tracking-[-.025em]" id="t-ig-clinic">The front desk, handled</h2>
<p class="mt-3.5 max-w-[60ch] text-[1.08rem] text-[#475569]">Mendwell takes bookings, reminders and intake forms off your reception team, so they can look after the people in the waiting room.</p>
<a class="mt-7 inline-flex min-h-12 items-center gap-2 rounded-xl bg-[#1d4ed8] px-[22px] font-semibold text-white transition-colors duration-200 hover:bg-[#1e3a8a] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#1d4ed8] motion-reduce:transition-none" href="#">Book a 20-minute demo <svg class="size-[18px]" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 12h14M13 5l7 7-7 7"/></svg></a>
<p class="mt-4 text-[.9rem] text-[#475569]">Used by 380 physiotherapy and osteopathy clinics.</p>
</div>
<ul class="grid grid-cols-1 gap-x-8 gap-y-9 sm:grid-cols-2">
<li class="grid grid-cols-[auto_1fr] content-start gap-x-4"><span class="inline-grid flex-none place-items-center text-[#1d4ed8] row-span-2 size-11 rounded-xl bg-[#dbeafe]"><svg class="size-6" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></span><h3 class="pt-0.5 text-[1.08rem] leading-[1.35] font-bold">Online booking around the clock</h3><p class="mt-1.5 text-[.98rem] text-[#475569]">Patients pick a slot from your real diary at 11pm, when they actually think about it.</p></li>
<li class="grid grid-cols-[auto_1fr] content-start gap-x-4"><span class="inline-grid flex-none place-items-center text-[#1d4ed8] row-span-2 size-11 rounded-xl bg-[#dbeafe]"><svg class="size-6" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="5" y="2" width="14" height="20" rx="2"/><path d="M12 18h.01"/></svg></span><h3 class="pt-0.5 text-[1.08rem] leading-[1.35] font-bold">Text reminders</h3><p class="mt-1.5 text-[.98rem] text-[#475569]">An automatic reminder 24 hours ahead cut no-shows by a third at our pilot clinics.</p></li>
<li class="grid grid-cols-[auto_1fr] content-start gap-x-4"><span class="inline-grid flex-none place-items-center text-[#1d4ed8] row-span-2 size-11 rounded-xl bg-[#dbeafe]"><svg class="size-6" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg></span><h3 class="pt-0.5 text-[1.08rem] leading-[1.35] font-bold">Intake forms before the visit</h3><p class="mt-1.5 text-[.98rem] text-[#475569]">Medical history arrives with the booking, not on a clipboard in the waiting room.</p></li>
<li class="grid grid-cols-[auto_1fr] content-start gap-x-4"><span class="inline-grid flex-none place-items-center text-[#1d4ed8] row-span-2 size-11 rounded-xl bg-[#dbeafe]"><svg class="size-6" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></span><h3 class="pt-0.5 text-[1.08rem] leading-[1.35] font-bold">Records kept private</h3><p class="mt-1.5 text-[.98rem] text-[#475569]">Notes are encrypted at rest and every view is logged against the practitioner.</p></li>
</ul>
</section></div>
About this set
Three feature sections built around a grid of icons, each with a short heading and one sentence of copy. Three-up grid with a centred heading lays six features out in three columns under an eyebrow, a headline and a line of subcopy, which suits a product overview straight after the hero. Four-up cards with a link on each puts four security features in bordered cards, each ending with a descriptive link such as Set up single sign-on, plus a whitepaper link beside the heading; use it when every feature has its own page to send people to. Split heading and icon list places the headline, a call to action and a short proof line in a left column beside a two-column list with the icons set to the side of the text, which works well for service businesses. Every section is a section element named by its h2, the features are list items with h3 headings, and the icons are inline SVG marked aria-hidden, so they stay sharp, take the accent colour and add nothing for screen readers to read out. CSS grid sets the column count, dropping to two columns below 992px and one below 576px.
What’s included
Three layouts: centred three-up grid, four-up linked cards, split heading with an icon list
Inline SVG icons that inherit the accent colour and are hidden from screen readers
Features marked up as a list with h3 headings under the section h2
Descriptive link text on every card instead of Learn more
One accent colour set by a CSS custom property
No JavaScript in any of the three versions
Accessibility
Each section is named by its h2 through aria-labelledby and each feature is a list item with an h3, so the outline reads cleanly. Icons are aria-hidden, links say where they go and show a 3px outline on keyboard focus, and the cards also lift when a link inside them has focus. The card lift and link arrow movement are switched off under prefers-reduced-motion.
Customise it
Change --ig-accent, --ig-accent-hover, --ig-tint and --ig-radius on .ig. In Bootstrap the button takes its colours from --bs-btn-* variables on .ig-btn and the cards from --bs-card-* variables; in Tailwind swap the #1d4ed8 and #dbeafe values.
