UI components · Marketing
Feature Grid
Also called: Features section, Benefits grid, Feature list, Feature highlights
The section on a marketing site that introduces what the product does. A set of icons, short titles, and one or two lines of text laid out in two or three neat columns, so visitors can scan the main selling points fast.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstAdd a feature grid section below the hero. At the top, an h2 heading (32px) and one line of 16px gray description. Below it, 6 features: 3 columns on desktop, 2 on tablet, 1 on mobile, with 32px gaps. Each feature has a 40px line icon (all from the same icon library), an 18px bold title, and at most two lines of 15px gray text, with no borders or shadows. Only use the real features I list below for the titles and descriptions, and don't invent extra ones: [Feature 1: name + one sentence on what the user gets] … [Feature 6]. Give the section 96px of padding top and bottom and a white background, alternating with the light gray sections above and below.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Feature Grid is what you need.
Use Feature Grid when
- Right after the hero on a marketing site or landing page, to explain the product's main features in one go
- When several selling points are equally important and have no order, so they can be scanned side by side
- A release page that needs to list the improvements in this update
Pick something else when
Items that happen in order (sign up, configure, go live)
Use insteadHow It WorksDozens of similar records for users to pick from (products, templates)
Use insteadCard GridAdmin and tool pages, where users are there to get work done and don't need marketing copy
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Piling up a dozen features that all look equally important, so visitors can't finish scanning or remember any of them
- 02
Titles like "Fast," "Smart," or "Secure" that don't say what the product actually does
- 03
Listing features that haven't shipped yet and are only planned, so the page doesn't match the product
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A section heading and description, plus 3–6 features side by side. Each feature is an icon (or small screenshot), a short title, and one or two lines of text, arranged in a two- or three-column grid.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A feature grid usually comes right after the hero and answers "what exactly can this product do?" At the top there's a section heading (like "Everything you need to run your store") and a line of description. Below it, 3–6 features sit in a grid, each with an icon, a short title, and one or two lines of text. Some versions make the most important feature bigger and pair it with a product screenshot.
It looks a lot like a Card Grid, but a card grid holds records of the same kind (products, articles) that you can click into, and there can be any number of them. A feature grid is a fixed piece of marketing copy with only a few items, and usually nothing is clickable. How it differs from How It Works: the steps there happen in order (sign up, import, go live) and are numbered, while the items in a feature grid sit side by side with no order. How it differs from a Stats Band: a stats band only shows a few big numbers, while a feature grid talks about features.
Keep each item to one feature and say what the user gets ("Customers pay by card and the money goes straight to your account," not "a powerful payment system"). Only list features that have actually shipped, not ones on the roadmap. Use icons from the same line icon set, and don't fill gaps with emoji. Pick a count that fills the grid, like 3 or 6, and switch to a single column on phones.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-feature-grid- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
section:is([class*="feature" i], [id*="feature" i], [class*="benefit" i], [id*="benefit" i], [class*="why-us" i], [class*="why-choose" i]):not([class*="featured" i]):is(div, ul):has(> :nth-child(1) > :is(svg, i, [class*="icon" i]):first-child + :is(h3, h4)):has(> :nth-child(2) > :is(svg, i, [class*="icon" i]):first-child + :is(h3, h4)):has(> :nth-child(3) > :is(svg, i, [class*="icon" i]):first-child + :is(h3, h4)):not(nav *, aside *, [role="menu"] *)dl:is([class*="grid-cols-2"], [class*="grid-cols-3"], [class*="grid-cols-4"]):has(> div > dt svg)
- Class keywords
Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.
featuresfeature-gridfeatures-gridfeatures-sectionfeature-sectionkey-featuresbenefitsbenefits-gridwhy-uswhy-choose-us
- Component names
React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.
FeatureGridFeaturesFeaturesSectionFeatureSectionFeaturesGridBenefits
- Structure
Computed from how the element is laid out and styled. It only adds to the score and never decides on its own.
starts with headinggrid of items
- Priority
- 4 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 30, 2026