Feature section design: replace three icon cards with what you really offer
The default features section is three equal cards, each with an icon, a two-word title and a sentence of praise. It turns up everywhere and says almost nothing. A better one lists the actual things you offer, with the details people decide on: prices, durations, sizes, dates.
Why the icon triplet fails
This style of feature section design came from software marketing, where three selling points (fast, secure, easy) sat under a hero. Templates copied it and AI builders learnt it from the templates, so it now turns up on bakeries, law firms and yoga studios alike. Its problems are structural. Three equal cards imply three equal points, when one usually matters most. The titles are adjectives (“Reliable”, “Fast”, “Friendly”) that every competitor also claims. The icons are generic, and when they're emoji they render differently on every device. And the one-line descriptions leave no room for facts.
Features, offers and benefits
Before designing the section, decide what it holds. For a product, features are capabilities (“exports to PDF”). For a service business, the equivalent is the offer itself: the services, menu items or packages. Benefits explain why a feature matters to the reader. A features section on a website works best when it leads with the concrete thing and puts the benefit in a short line underneath, rather than the other way round.
| Generic card | Specific replacement |
|---|---|
| Fast service: we value your time | Beard trim and hot towel, 30 min, walk-ins on Saturday mornings |
| Quality ingredients: only the best | Country sourdough, 900 g, stone-ground flour from one mill |
| Expert team: years of experience | Initial assessment, 60 min, with a home exercise plan the same day |
| Flexible plans: options for everyone | Ten-class pass, valid three months, cancel up to two hours before |
Layouts that suit real offers
- Priced list
- Name and short description on the left, duration and price on the right, one row per item. The fastest layout to scan for services and menus, and it works at any width.
- Product grid
- Cards with a photo, name, size and price, for physical products. Fix one image ratio per grid.
- Lead and supporting
- One main feature large with an image or demo, and three to five smaller ones in a list beside or below it. Good for software with one headline capability.
- Alternating rows
- Text and image swapping sides, one feature per row. Suits a few features that each need a screenshot and a paragraph; it gets long beyond four or five.
- Comparison table
- When features vary by plan or model, a table says more than cards.
Feature grid design details
- Lead with the noun, not the adjective. The title is the thing (“Reformer pilates”), and the qualities follow in the description.
- Put the deciding fact in a consistent place. Prices right-aligned with tabular figures, durations in a muted colour after the name. Readers learn the pattern after one row.
- Use icons only when they add meaning. A small consistent set (one stroke weight, one size) can help people find a category. Decorative icons above every item add noise. Emoji as icons look different on each platform and read as filler.
- Vary emphasis honestly. If one offer is the most popular or the best place to start, say so and give it more space.
- Keep the count real. Show what you offer. Six services listed properly beat three vague cards, and twelve may need grouping.
Accessibility
A list of services is a list, so mark it up as one (ul or a description list), which lets screen readers announce how many items there are. Decorative icons should be hidden from assistive technology with empty alt text or aria-hidden; meaningful ones need a text label. Prices and durations should be text, not baked into images, and the muted colour for secondary details still has to reach 4.5:1 against the background.
How Anticode writes feature sections
Anticode's design engine writes sections from the facts in the brief rather than from a stock triplet: services become a priced list, products a grid with sizes and prices, and short selling points stay short. The more specific your request (“a barbershop with skin fades, beard trims and hot towel shaves, with times and prices”), the more specific the section. The Critic flags emoji used as icons, and its stock-phrase check catches the hype words that tend to fill generic cards.
The Critic doesn't measure whether three cards are identical, so that judgement is yours. If a section reads like filler, ask for the change in a sentence (“replace the three feature cards with our five services and their prices”). For writing the words themselves, see how to write a services page.
Questions people ask
How many features should a landing page show?
As many as are real and relevant to the visitor's decision. For a focused landing page, one main feature and a few supporting ones usually beat a long grid.
Should feature sections use icons?
Only if they help people find or recognise something. One consistent icon set used sparingly is fine; decorative icons and emoji on every card add noise.
Features or benefits first?
Name the concrete thing first, then the benefit in a short line. Readers trust a specific feature more than a claimed benefit.