Feature Grid

Grid of features, each with icon, title and description.

html

<section class="fgrid">
  <h2 class="fgrid__heading">Built for how teams actually work</h2>
  <div class="fgrid__grid fgrid__grid--cols-3">
    <div class="fgrid__item">
      <span class="fgrid__icon" style="background:#BFD9F2;" aria-hidden="true">&#9889;</span>
      <h3>Instant sync</h3>
      <p>Changes appear everywhere within milliseconds.</p>
    </div>
    <div class="fgrid__item">
      <span class="fgrid__icon" style="background:#BFD9F2;" aria-hidden="true">&#128274;</span>
      <h3>Private by default</h3>
      <p>Nothing leaves your workspace unless you say so.</p>
    </div>
    <div class="fgrid__item">
      <span class="fgrid__icon" style="background:#BFD9F2;" aria-hidden="true">&#128200;</span>
      <h3>Built-in reporting</h3>
      <p>See trends without exporting a single spreadsheet.</p>
    </div>
  </div>
</section>
<style>
.fgrid { font: 16px/1.5 system-ui, sans-serif; color: #241430; padding: 24px; }
.fgrid__heading { margin: 0 0 20px; font-size: 24px; font-weight: 700; }
.fgrid__grid { display: grid; gap: 24px; }
.fgrid__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.fgrid__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.fgrid__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.fgrid__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; font-size: 18px; margin-bottom: 12px; }
.fgrid__item h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.fgrid__item p { margin: 0; font-size: 14px; color: #241430cc; }
</style>

tailwind

<section class="font-sans text-[#241430] p-6">
  <h2 class="m-0 mb-5 text-2xl font-bold">Built for how teams actually work</h2>
  <div class="fgrid-tw fgrid-tw--cols-3 grid gap-6">
    <div>
      <span class="inline-flex items-center justify-center w-10 h-10 rounded-[10px] text-lg mb-3" style="background:#BFD9F2;" aria-hidden="true">&#9889;</span>
      <h3 class="m-0 mb-1.5 text-base font-bold">Instant sync</h3>
      <p class="m-0 text-sm text-[#241430]/80">Changes appear everywhere within milliseconds.</p>
    </div>
    <div>
      <span class="inline-flex items-center justify-center w-10 h-10 rounded-[10px] text-lg mb-3" style="background:#BFD9F2;" aria-hidden="true">&#128274;</span>
      <h3 class="m-0 mb-1.5 text-base font-bold">Private by default</h3>
      <p class="m-0 text-sm text-[#241430]/80">Nothing leaves your workspace unless you say so.</p>
    </div>
    <div>
      <span class="inline-flex items-center justify-center w-10 h-10 rounded-[10px] text-lg mb-3" style="background:#BFD9F2;" aria-hidden="true">&#128200;</span>
      <h3 class="m-0 mb-1.5 text-base font-bold">Built-in reporting</h3>
      <p class="m-0 text-sm text-[#241430]/80">See trends without exporting a single spreadsheet.</p>
    </div>
  </div>
</section>
<style>
.fgrid-tw--cols-2 { grid-template-columns: repeat(2, 1fr); }
.fgrid-tw--cols-3 { grid-template-columns: repeat(3, 1fr); }
.fgrid-tw--cols-4 { grid-template-columns: repeat(4, 1fr); }
</style>

react

export function FeatureGrid({
  heading = "Built for how teams actually work",
  columns = "3",
  accent = "#BFD9F2",
  showIcons = true,
}) {
  const items = [
    { icon: "\u26a1", title: "Instant sync", desc: "Changes appear everywhere within milliseconds." },
    { icon: "\ud83d\udd12", title: "Private by default", desc: "Nothing leaves your workspace unless you say so." },
    { icon: "\ud83d\udcc8", title: "Built-in reporting", desc: "See trends without exporting a single spreadsheet." },
  ];
  return (
    <section style={{ font: "16px/1.5 system-ui, sans-serif", color: "#241430", padding: 24 }}>
      <h2 style={{ margin: "0 0 20px", fontSize: 24, fontWeight: 700 }}>{heading}</h2>
      <div style={{ display: "grid", gap: 24, gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
        {items.map((item) => (
          <div key={item.title}>
            {showIcons && (
              <span aria-hidden="true" style={{ display: "inline-flex", alignItems: "center", justifyContent: "center",
                width: 40, height: 40, borderRadius: 10, fontSize: 18, marginBottom: 12, background: accent }}>{item.icon}</span>
            )}
            <h3 style={{ margin: "0 0 6px", fontSize: 16, fontWeight: 700 }}>{item.title}</h3>
            <p style={{ margin: 0, fontSize: 14, color: "#241430cc" }}>{item.desc}</p>
          </div>
        ))}
      </div>
    </section>
  );
}