Kanban board mockup with status columns

Static kanban illustration for a product/features page, not a real board. Keep to 3-5 items per column so it reads at a glance, more than that looks cluttered at hero scale.

pattern · linear.app composite feature-gridvanilla

Get a site with blocks like this

Live preview

open in new tab ↗

<div class="lkc-board">
  <div class="lkc-col">
    <div class="lkc-col-head"><span class="lkc-dot" style="background:#8a8f98"></span>Backlog<span class="lkc-count">8</span></div>
    <div class="lkc-item">Reduce UI flicker</div>
    <div class="lkc-item">Add buffering for streams</div>
  </div>
  <div class="lkc-col">
    <div class="lkc-col-head"><span class="lkc-dot" style="background:#e2b93b"></span>Todo<span class="lkc-count">71</span></div>
    <div class="lkc-item">Remove UI inconsistencies</div>
    <div class="lkc-item">Fix TypeError on load</div>
  </div>
  <div class="lkc-col">
    <div class="lkc-col-head"><span class="lkc-dot" style="background:#5e6ad2"></span>In Progress<span class="lkc-count">3</span></div>
    <div class="lkc-item lkc-item-active">Optimize load times</div>
  </div>
  <div class="lkc-col">
    <div class="lkc-col-head"><span class="lkc-dot" style="background:#4cb782"></span>Done<span class="lkc-count">53</span></div>
    <div class="lkc-item lkc-item-done">Clean up deprecated APIs</div>
    <div class="lkc-item lkc-item-done">Reduce ETA fluctuations</div>
  </div>
</div>

Block id: linear-kanban-columnsvanilla · swap-content

More composite blocks

2x2 benefit grid with embedded UI snippets

cal.com

Pricing feature comparison table with highlighted column

cal.com

Central-hub integration diagram

cal.com

Issue tracker card with live activity feed

linear

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.

Get my free 15-min audit Book a Discovery Call