Feature grid

How to use it

Use on a landing or product page to summarise up to six benefits at a glance. Do not use it for steps that must be read in order (use a numbered list) or for comparing plans (use the comparison table). Keep each description to one sentence, and replace the icons and text with your own; the grid reflows from three columns down to one on its own.

Accessibility

The features are a real <ul> under an <h2>, so screen readers announce "list, 6 items", and each feature has its own <h3>, which makes the grid easy to skim by heading. Icons are decorative inline SVG with aria-hidden="true"; the grid has no interactive parts, so nothing is added to the Tab order. Headings #0f172a on white are 17.85:1, descriptions #475569 on white 7.58:1, and the intro #334155 on white 10.35:1.

Source (copy-ready)

Copy code

<section class="dcl-features" aria-labelledby="dcl-features-title">
  <h2 id="dcl-features-title" class="dcl-features__title">Everything your team needs to plan the week</h2>
  <p class="dcl-features__intro">Built for teams of five to fifty who would rather ship than sit in status meetings.</p>
  <ul class="dcl-features__grid" role="list">
    <li class="dcl-features__item">
      <svg class="dcl-features__icon" viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#1d4ed8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16M15 4v16"/></svg>
      <h3 class="dcl-features__name">Shared boards</h3>
      <p class="dcl-features__text">Everyone sees the same week, updated the moment a task moves.</p>
    </li>
    <li class="dcl-features__item">
      <svg class="dcl-features__icon" viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#1d4ed8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M6 10h1m3 0h1m3 0h1m3 0h1M7 14h10"/></svg>
      <h3 class="dcl-features__name">Keyboard first</h3>
      <p class="dcl-features__text">Create, move and finish tasks without touching the mouse.</p>
    </li>
    <li class="dcl-features__item">
      <svg class="dcl-features__icon" viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#1d4ed8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 15a5 5 0 0 1 4-8 6 6 0 0 1 11 3 4 4 0 0 1-1 8H8"/><path d="M3 3l18 18"/></svg>
      <h3 class="dcl-features__name">Offline mode</h3>
      <p class="dcl-features__text">Keep working on a train; changes sync when you reconnect.</p>
    </li>
    <li class="dcl-features__item">
      <svg class="dcl-features__icon" viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#1d4ed8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
      <h3 class="dcl-features__name">Time zones</h3>
      <p class="dcl-features__text">Due dates show in each person's local time, automatically.</p>
    </li>
    <li class="dcl-features__item">
      <svg class="dcl-features__icon" viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#1d4ed8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>
      <h3 class="dcl-features__name">Access control</h3>
      <p class="dcl-features__text">Choose who can view, edit or invite on every board.</p>
    </li>
    <li class="dcl-features__item">
      <svg class="dcl-features__icon" viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#1d4ed8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>
      <h3 class="dcl-features__name">Weekly digest</h3>
      <p class="dcl-features__text">A short Monday summary of what shipped and what slipped.</p>
    </li>
  </ul>
</section>
<style>
.dcl-features { padding: 2rem 1.25rem; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-features__title { margin: 0 0 0.5rem; font-size: 1.75rem; color: #0f172a; background-color: #ffffff; }
.dcl-features__intro { margin: 0 0 1.75rem; max-width: 40rem; color: #334155; background-color: #ffffff; }
.dcl-features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.dcl-features__item { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; padding: 1.25rem; border: 1px solid #e2e8f0; border-radius: 0.75rem; color: #0f172a; background-color: #ffffff; }
.dcl-features__icon { flex: none; }
.dcl-features__name { margin: 0; font-size: 1.1rem; color: #0f172a; background-color: #ffffff; }
.dcl-features__text { margin: 0; line-height: 1.5; color: #475569; background-color: #ffffff; }
</style>