A feature section for a product landing page. The header is split in two: an eyebrow and heading on the left, a supporting paragraph on the right. Below it sit six features, each with a line icon in a tinted tile, a short title and two or three lines of text, separated from the header by a thin rule. The grid is three columns on desktop, two on tablets and a single column on phones, where the header stacks above it.
const features = [
{
title: "Invoices in two clicks",
text: "Pick a client, pick the work. Tax, currency and your payment terms are filled in from the last invoice you sent them.",
icon: "M7 3.75h7.5L18.25 7.5v12.75H7a1.25 1.25 0 0 1-1.25-1.25V5A1.25 1.25 0 0 1 7 3.75Zm7 0V8h4.25M9 12.5h6M9 16h4",
},
{
title: "Receipts that file themselves",
text: "Forward a receipt or photograph it. The amount, date and supplier are read off and matched to the right expense category.",
icon: "M6 3.75h12v16.5l-2.4-1.5-2.4 1.5-1.2-.75-1.2.75-2.4-1.5-2.4 1.5V3.75Zm3 4.75h6M9 12h6M9 15.5h3",
},
{
title: "Bank feeds, reconciled",
text: "Connect your accounts once. Each morning new transactions arrive already paired with the invoice or bill they belong to.",
icon: "M3.75 9.5 12 4.25l8.25 5.25M5.5 9.75v7.5M10 9.75v7.5M14 9.75v7.5M18.5 9.75v7.5M3.75 19.75h16.5",
},
{
title: "Tax set aside as you earn",
text: "A running estimate of what you owe this quarter, updated with every payment, so the bill is never a surprise.",
icon: "M12 3.75a8.25 8.25 0 1 0 8.25 8.25H12V3.75Zm3-.6a8.26 8.26 0 0 1 5.85 5.85H15V3.15Z",
},
{
title: "Reminders you do not have to write",
text: "Polite follow-ups go out three, seven and fourteen days after a due date, and stop the moment the money lands.",
icon: "M6.5 16.25V11a5.5 5.5 0 0 1 11 0v5.25l1.5 1.5H5l1.5-1.5Zm3.75 3.5a1.9 1.9 0 0 0 3.5 0M12 3.75V5.5",
},
{
title: "A clean handover to your accountant",
text: "Invite them with a read-only seat or export the year as one tidy file. Every figure links back to its source document.",
icon: "M8.5 11.25a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm-5 8a5 5 0 0 1 10 0m2.25-7.75 2 2 3.5-3.75",
},
];
export default function ThreeColumnFeatureGridWithIcons() {
return (
<section className="bg-white px-6 py-16 text-slate-900 sm:py-24">
<div className="mx-auto max-w-6xl">
<div className="grid gap-6 lg:grid-cols-2 lg:items-end lg:gap-16">
<div>
<p className="text-sm font-semibold text-emerald-700">Bookkeeping for one-person businesses</p>
<h2 className="mt-3 text-3xl font-semibold tracking-tight sm:text-4xl">Everything the books need, nothing an accountant would bill you for</h2>
</div>
<p className="text-lg leading-relaxed text-slate-600 lg:pb-1">
Six jobs that used to eat a Sunday afternoon each month, handled quietly in the background while you do the work you are paid for.
</p>
</div>
<ul className="mt-14 grid gap-x-10 gap-y-12 sm:grid-cols-2 lg:mt-16 lg:grid-cols-3">
{features.map((f) => (
<li key={f.title} className="border-t border-slate-200 pt-8">
<span className="flex h-11 w-11 items-center justify-center rounded-xl bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-600/15">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="h-6 w-6">
<path d={f.icon} />
</svg>
</span>
<h3 className="mt-5 text-base font-semibold">{f.title}</h3>
<p className="mt-2 text-sm leading-relaxed text-slate-600">{f.text}</p>
</li>
))}
</ul>
</div>
</section>
);
}
Install with one command: npx shadcn@latest add https://we.inc/r/three-column-feature-grid-with-icons.json
Three, six or nine fill a three-column grid without leaving a gap in the last row. If you have four or eight, switch to two or four columns so the rows stay even.
Start with a single column and add columns at breakpoints: `grid sm:grid-cols-2 lg:grid-cols-3`. Use `gap-x-10 gap-y-12` so the space between rows is a little larger than the space between columns.
Each icon is a single SVG path written inline, so nothing is downloaded and no icon package is needed. To use your own, paste the path data from any 24x24 outline icon into the `icon` field.
One or two sentences. Say what the feature does for the reader in plain words and keep all six close to the same length, so the bottom edges of the rows line up.
Yes. Wrap the title in an `<a>` and add a focus ring such as `focus-visible:ring-2 focus-visible:ring-emerald-600`. Keep the description outside the link so the link text stays short.
Related: Bento Grid with Six Feature Tiles, Alternating Feature Rows with Illustrations, Split Hero with Email Capture, Pricing Table with Monthly and Yearly Toggle.
More feature sections or all free UI components. Start for free to have a full site built around it.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.