Features — Icon grid

Centred introduction above six icon-led features in an equal-column grid. Use it when benefits have similar weight and need quick scanning.

ReactHTML

1440 × 900

Open in new tab

Component.tsx69 lines

export default function FeaturesIconGrid() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <div className="mx-auto max-w-2xl text-center">
          <p className="text-sm font-medium text-neutral-500">Eyebrow for the capabilities</p>
          <h2 className="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Heading that names the key benefits</h2>
          <p className="mt-4 text-lg text-pretty text-neutral-600">A short introduction that connects these capabilities to the outcome readers need.</p>
        </div>
        <ul role="list" className="mt-16 grid gap-x-8 gap-y-12 sm:grid-cols-2 lg:grid-cols-3">
          <li>
            <span aria-hidden="true" className="flex size-10 items-center justify-center rounded-md bg-neutral-100 text-neutral-900">
              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5">
                <path d="M12 3v18M3 12h18" />
              </svg>
            </span>
            <h3 className="mt-4 text-base font-semibold">Title for the main benefit</h3>
            <p className="mt-2 text-base text-pretty text-neutral-600">Explain the core benefit in one sentence. Add a concrete detail that helps readers understand the result.</p>
          </li>
          <li>
            <span aria-hidden="true" className="flex size-10 items-center justify-center rounded-md bg-neutral-100 text-neutral-900">
              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5">
                <path d="M4 5h16v14H4zM8 9h8M8 13h5" />
              </svg>
            </span>
            <h3 className="mt-4 text-base font-semibold">Title for a useful capability</h3>
            <p className="mt-2 text-base text-pretty text-neutral-600">Describe the capability that supports the main outcome. Say what readers can do with it.</p>
          </li>
          <li>
            <span aria-hidden="true" className="flex size-10 items-center justify-center rounded-md bg-neutral-100 text-neutral-900">
              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5">
                <path d="M4 7h7v10H4zM15 7h5v10h-5M11 12h4" />
              </svg>
            </span>
            <h3 className="mt-4 text-base font-semibold">Title for a clearer workflow</h3>
            <p className="mt-2 text-base text-pretty text-neutral-600">Name the step this feature makes easier. Explain how it fits into the wider process.</p>
          </li>
          <li>
            <span aria-hidden="true" className="flex size-10 items-center justify-center rounded-md bg-neutral-100 text-neutral-900">
              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5">
                <path d="M12 3 3 7v6c0 4 9 8 9 8s9-4 9-8V7zM8 12l3 3 5-6" />
              </svg>
            </span>
            <h3 className="mt-4 text-base font-semibold">Title for an important detail</h3>
            <p className="mt-2 text-base text-pretty text-neutral-600">Point out a detail readers might otherwise overlook. Connect it to a practical reason to choose this option.</p>
          </li>
          <li>
            <span aria-hidden="true" className="flex size-10 items-center justify-center rounded-md bg-neutral-100 text-neutral-900">
              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5">
                <path d="M4 7h16M4 17h16M8 4v6M16 14v6" />
              </svg>
            </span>
            <h3 className="mt-4 text-base font-semibold">Title for a flexible option</h3>
            <p className="mt-2 text-base text-pretty text-neutral-600">Describe the choice this feature gives readers. Note where that flexibility is most useful.</p>
          </li>
          <li>
            <span aria-hidden="true" className="flex size-10 items-center justify-center rounded-md bg-neutral-100 text-neutral-900">
              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5">
                <path d="M5 12l4 4L19 6" />
              </svg>
            </span>
            <h3 className="mt-4 text-base font-semibold">Title for a dependable result</h3>
            <p className="mt-2 text-base text-pretty text-neutral-600">Explain the assurance that supports the decision. Give a specific detail readers can check.</p>
          </li>
        </ul>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for six equally important benefits. Choose features-media-list when one screenshot explains the list, or features-bento-grid for uneven emphasis. Variations: reduce to three items, group by capability, or add one text link below the grid.
Hierarchy: The section heading is 30px text-3xl semibold with tracking-tight and balanced wrapping, rising to 36px text-4xl at 640px. Read the centred eyebrow, heading and 18px lede before the six features in row order. Titles are 16px semibold and bodies 16px neutral-600. Slots: eyebrow 4 words, heading 8, lede 24, feature title 6, body 30.
Responsive: One column below 640px; two equal columns from 640px sm:grid-cols-2; three from 1024px lg:grid-cols-3. Icon and text alignment stays left in every item. Header type and section padding step at 640px.
Layout: A white section uses a 1152px max-w-6xl container, 24px px-6 side padding, and 64px py-16 vertical padding, rising to 96px sm:py-24 at 640px. A centred max-w-2xl 672px intro precedes a six-item ul by 64px mt-16. The grid has 32px gap-x-8 and 48px gap-y-12. Each item has a 40px rounded-md icon tile, a 16px title margin, and an 8px body margin.
States: All content is static; there are no selected, disabled or loading states.

Desktop wireframe

┌────────────────────────────────────────────────────────────┐
│                   Eyebrow                                  │
│              Heading for key benefits                      │
│                  Short introduction                        │
│                                                            │
│   Icon               Icon               Icon               │
│   Benefit title      Capability title   Outcome title      │
│   Supporting body    Supporting body    Supporting body    │
│                                                            │
│   Icon               Icon               Icon               │
│   Detail title       Workflow title     Assurance title    │
│   Supporting body    Supporting body    Supporting body    │
└────────────────────────────────────────────────────────────┘

View all

Features — Accordion beside media
Layout tags: asymmetric,list,media
Features — Alternating media rows
Layout tags: split,media,spacious
Features — Before and after panels
Layout tags: split,list,icons

Features — Icon grid

Pattern notes

More in Features

Features — Accordion beside media

Features — Alternating media rows

Features — Before and after panels