--- title: "Feature section design: variants and examples | Kombai" description: "A feature section explains what a product does, one capability at a time, each with a short title, a line of detail and a visual." canonical_url: https://kombai.com/glossary/feature-section/ author: "The Kombai Team" --- # Feature section A feature section explains what a product does, one capability at a time, each with a short title, a line of detail and a visual. - Also called: features, feature grid - Platforms: Web, Mobile - In the Kombai gallery: [224 web designs](https://kombai.com/gallery/web/features/), [44 mobile designs](https://kombai.com/gallery/mobile/features/) - [Havenwell](https://kombai.com/gallery/inspirations/features-web-15/) (Web) - [Quill](https://kombai.com/gallery/inspirations/features-ios-3/) (Mobile) - [Beacon](https://kombai.com/gallery/inspirations/features-web-2/) (Web) ## What is a feature section? A feature section is the part of a page that turns a product pitch into specifics. It names a handful of capabilities and gives each one a title, a sentence or two and a visual: an icon, a screenshot or a small illustration. It usually sits right below the hero, and long product pages repeat it. - Every item follows the same pattern, so people can scan the titles alone. - One headline above the items says what they add up to. ## When to use feature section - **Explaining a product.** Right after the hero, to show what the product actually does. - **Comparing plans or tiers.** To spell out what each plan or program includes. - **Mobile app tours.** A short tour of what a new app can do, before or after sign-up. ## When not to use one - **Steps in a sequence.** If order matters, use a numbered how it works section. - **Proof and results.** Numbers and quotes belong in a stats section or testimonials. - **Twenty small features.** A long checklist reads better as a comparison table. ## Anatomy 1. **Section heading**: Eyebrow and one headline 2. **Feature list**: One capability per item 3. **Title and description**: A name and a line of detail 4. **Visual**: Shows the selected feature 5. **States**: Idle, selected, focus ## Variants We sorted every feature section design in the Kombai gallery and found six patterns. ### 1. Icon columns Rows of two to five columns, each an icon, a short title and a line or two of copy. - [Everholm](https://kombai.com/gallery/inspirations/features-web-10/) (Web) - [Scribeleaf](https://kombai.com/gallery/inspirations/features-ios-10/) (Mobile) - [Keelframe](https://kombai.com/gallery/inspirations/features-web-13/) (Web) ### 2. Cards with product shots Each card pairs a title and a sentence with a cropped screenshot or mock of that feature. - [Kelvara](https://kombai.com/gallery/inspirations/features-web-14/) (Web) - [Umbercall](https://kombai.com/gallery/inspirations/features-web-22/) (Web) - [Cobblestack](https://kombai.com/gallery/inspirations/features-web-9/) (Web) ### 3. Split rows Copy on one side and one large visual on the other. Long pages stack several and swap sides, and phones put the visual above or below the copy. - [Marnwell](https://kombai.com/gallery/inspirations/features-web-17/) (Web) - [Kinship](https://kombai.com/gallery/inspirations/features-ios-41/) (Mobile) - [Verba](https://kombai.com/gallery/inspirations/features-web-112/) (Web) ### 4. List beside a visual A short list of features next to one visual, often with the selected item expanded to explain it. - [Fenmoor](https://kombai.com/gallery/inspirations/features-web-36/) (Web) - [Perimor](https://kombai.com/gallery/inspirations/features-web-19/) (Web) - [Quandrel](https://kombai.com/gallery/inspirations/features-web-20/) (Web) ### 5. Tabbed features Tabs or a segmented control above one panel, so each audience or use case gets its own view. - [Xantrell](https://kombai.com/gallery/inspirations/features-web-33/) (Web) - [Cadre Studio](https://kombai.com/gallery/inspirations/features-ios-2/) (Mobile) - [Xelbrook](https://kombai.com/gallery/inspirations/features-web-31/) (Web) ### 6. Feature carousel Large cards in a row that scrolls sideways, one feature per card, with arrows or dots. - [Vireline](https://kombai.com/gallery/inspirations/features-web-26/) (Web) - [Aurum](https://kombai.com/gallery/inspirations/features-ios-1/) (Mobile) - [Emberwold](https://kombai.com/gallery/inspirations/features-web-34/) (Web) ## Where feature sections show up ### Developer tools APIs, editors and build tools show code, diagrams and settings right in the feature cards. - [Draypost](https://kombai.com/gallery/inspirations/features-web-12/) (Web) - [Emberdeck](https://kombai.com/gallery/inspirations/features-ios-39/) (Mobile) - [Zimbral](https://kombai.com/gallery/inspirations/features-web-28/) (Web) ### Physical products Large photography carries the feature, with a short claim about what the material or design does. - [Skorva](https://kombai.com/gallery/inspirations/features-web-40/) (Web) - [Northvane](https://kombai.com/gallery/inspirations/features-web-98/) (Web) - [Kasané](https://kombai.com/gallery/inspirations/features-web-110/) (Web) ### Mobile app tours One screen that sums up what an app does, as cards, tiles or a phone mock ringed by labels. - [Solara](https://kombai.com/gallery/inspirations/features-ios-4/) (Mobile) - [Docklane](https://kombai.com/gallery/inspirations/features-ios-22/) (Mobile) - [Morrowcase](https://kombai.com/gallery/inspirations/features-ios-42/) (Mobile) ### Security and trust Security, privacy and reliability laid out as features, from enterprise pages to password managers. - [Vela Enterprise](https://kombai.com/gallery/inspirations/features-web-4/) (Web) - [Candor](https://kombai.com/gallery/inspirations/features-web-3/) (Web) - [Keyhold](https://kombai.com/gallery/inspirations/features-web-171/) (Web) ## Feature section vs similar components | | [Feature section](https://kombai.com/glossary/feature-section/) | [Bento grid](https://kombai.com/glossary/bento-grid/) | [How it works](https://kombai.com/glossary/how-it-works/) | [Card](https://kombai.com/glossary/card/) | |---|---|---|---|---| | Shows | What the product does | Several messages at once | Steps in order | One item | | Layout | Columns, rows or tabs | Unequal tiles | A numbered sequence | One self-contained block | | Best for | Benefits and capabilities | A dense overview | Explaining a process | Repeating items in a grid | ## Build notes - Give the section an

and each feature an

, so it reads as an outline. - Keep every item to a title, one or two lines and one visual. - For a list that swaps a visual, use the tabs pattern: tablist, tab and tabpanel roles. - Arrow keys move between tabs, and Tab moves on into the panel. - Give a screenshot alt text that says what it shows, or alt="" when the copy beside it already does. - On phones, stack each split copy first and turn tabs into stacked sections. ## FAQ ### How many features should a feature section show? Three to six. Fewer looks thin and more turns into a checklist nobody reads. If the product does more, group the features under a few headlines and give each group its own section. ### Icons, screenshots or illustrations? Screenshots when the interface is the selling point, since they show the product working. Icons when the features are abstract, like security or support. Illustrations sit in between and suit early products with little UI to show yet. ### Should features be benefits or capabilities? Lead with the benefit in the title and name the capability in the description. "Close the month in one pass" says why it matters, and the line under it can say it reconciles card statements. ### What's the difference between a feature section and a how it works section? A feature section lists what a product can do, in any order. A how it works section walks through steps people take in sequence, so it is numbered and reads top to bottom or left to right. ## Related terms - [Bento grid](https://kombai.com/glossary/bento-grid/) - [How it works](https://kombai.com/glossary/how-it-works/) - [Hero section](https://kombai.com/glossary/hero-section/) - [Tabs](https://kombai.com/glossary/tabs/) ## References - [WAI-ARIA Authoring Practices: Tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) - [MDN: The HTML heading elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements) - [W3C WAI: Images tutorial](https://www.w3.org/WAI/tutorials/images/)