Mosaic
A centered heading above a three-column grid of feature cards, each with an icon tile, a title and a short description.
Features section templates
A features section is where a page stops making a promise and starts backing it up. It groups what a product or service actually does into scannable pieces, so a visitor can find the one thing they came for without reading a paragraph.
12 features section layouts
Each one below is a live preview rendering in your current design language, not a screenshot. Open any of them to see it full-width, switch the business type to read it with your kind of content, or add it to a page.
Bento
An asymmetric bento grid where one flagship cell spans a two-by-two block and five smaller cells fill the rest.
Cascade
A sticky heading on the left beside a divided vertical list of features, each led by an icon tile.
Anatomy
A specimen sheet rather than a feature list: real interface components on a ruled board, each labelled with what it demonstrates.
Contrast
Argues by opposition — each "without a system" row is paired against its "with a system" counterpart across two columns.
Manifest
Breadth as the message: a four-column grid of headed capability groups, each counting what it contains.
Relay
A four-step sequence rather than parallel cells, each step a numbered icon node on a connecting track.
Orbit
Integrations arranged radially around a central hub — the one feature layout that abandons the grid.
Ribbon
Alternating full-width rows, one deep feature per row, in place of a shallow grid of cells.
Flow
A pipeline diagram: three process stages laid out horizontally and joined into one continuous flow.
Callout
Spatial annotation — one product window with numbered pins over it and a legend mapping each number to a feature.
Console
One continuous control surface: copy on the left beside a single settings panel that shows the product doing its job.
How to choose a features section
Count your features first. Three to six sit comfortably in an even grid. More than that and a list or bento layout stops the grid from turning into wallpaper. If one feature matters far more than the rest, pick a layout with a flagship cell rather than giving everything equal weight — an even grid tells the reader nothing is more important than anything else.
At a glance
- Layouts
- 12 distinct features sections
- Styles covered
- grid, icons, bento, asymmetric, list, split, specimen, components
- Styling
- Your color, typography, spacing, radius and shadow tokens
- Export
- HTML, CSS, JSON, or an AI instruction package
Features section FAQ
How many features should a section show?
Three to six is the usual range. Fewer than three rarely justifies a grid; more than six stops being scannable and starts being a specification sheet. If you have more, group them or split them across two sections.
Do features need icons?
Icons help the eye find its place in a grid, but they carry very little meaning on their own. They are worth using when the set is visually consistent and each one is at least loosely related to its feature. A clean grid with no icons beats a grid of vague, mismatched ones.
What is a bento layout?
A bento grid uses cells of different sizes rather than one uniform row, so a flagship feature can occupy a larger tile while the rest sit around it. It is a good fit when your features are genuinely unequal in importance.