Skip to content
UI Kit
Accent color

Feature sections and bento grids

What a product or service offers, in fifteen layouts: grids, cards, rows, tabs, four bento layouts, steps and a before and after.

15 variants
Switch category

Grid, rows or bento

A feature section answers the question a visitor asks after the hero, which is what exactly they get. The components here show three to nine points with an icon, a title and a sentence each, or bigger tiles with screenshots when the product is visual.

Icon grid and Compact icon row suit services with many small benefits. Alternating and With screenshot give each feature room and work for software with a few strong functions. The four bento layouts mix tile sizes, so the most important point gets the largest tile. Tabs with visual saves height when every feature needs its own picture, and Numbered steps turns features into a sequence.

Write each title as a benefit, not a function name, and keep the sentence below it to one line on desktop. A bento grid needs one clear lead tile, otherwise it reads as a puzzle. On phones every grid becomes a single column, so put the strongest point first.

Features

Icon grid

Six features in a hairline grid that closes cleanly on every width.

Open in Studio

Cards

Raised cards with a large icon and a link each, lifting slightly on hover.

Open in Studio

Two-column list

Heading on the left, short points in two columns on the right.

Open in Studio

Alternating

Text and visual change sides from row to row, each with a few points.

Open in Studio

Tabs with visual

A list on the left swaps the visual on the right and advances on its own until touched. On phones the visual sits in the open item.

Open in Studio

Bento with three tiles

One large tile and two small ones next to it.

Open in Studio

Bento with four tiles

Wide and narrow tiles that swap places in the second row.

Open in Studio

Bento mosaic

Seven tiles on four columns, one large anchor and six around it, with no gaps on any width.

Open in Studio

Bento with uneven columns

Three columns of different width, the tiles in each column of different height.

Open in Studio

With screenshot

Points on the left, a large screenshot that runs past the right edge.

Open in Studio

Centered

A calm grid on one axis, round icons with a soft light.

Open in Studio

Numbered steps

For a real sequence only. A line connects the steps, upright on phones.

Open in Studio

Comparison cards

The old way next to the new way, the new one raised and lit.

Open in Studio

Compact icon row

Four short promises in one framed row, often right under a hero.

Open in Studio

Spotlight grid

Cards with a light that follows the pointer and a thin accent line on hover.

Open in Studio

Details

What Features brings along, read from the registry and the source.

Area
Marketing
Variants
15
Version
1.0.2 · since 1.0.0
File
components/ui/features.tsx
Brings along
utilskiticonsectionrevealmotion
npm packages
None
Languages
English and German, 3 texts of its own
Studio
All 15 variants editable
In collections
SaaS landing page
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The FeaturesProps interface from components/ui/features.tsx, with the comments from the code.

  • variantoptional
    FeaturesVariant

    gridcardslistalternatingtabsbento-3bento-4bento-mosaicbento-columnswith-screenshotcenterednumberedcomparisonicon-rowspotlight

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • actionsoptional
    React.ReactNode

    Buttons or links next to or under the heading

  • itemsrequired
    FeatureItem[]
  • mediaoptional
    React.ReactNode

    with-screenshot: the large screenshot

  • comparisonoptional
    { before: FeaturesComparisonSide; after: FeaturesComparisonSide }

    comparison: the old way and the new way

Built-in texts

Features writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 3 texts
moreEnglish Learn moreGerman Mehr erfahren
featuresEnglish FeaturesGerman Merkmale
stepEnglish StepGerman Schritt

Accessibility

Read from the source of the component.

  • Features handles the keys Arrow up, Arrow down, Arrow left, Arrow right and Space itself.
  • Sets aria-controls, aria-label, aria-labelledby, aria-orientation and aria-selected, so screen readers announce purpose and state.
  • Uses the roles group, tab, tablist and tabpanel.
  • Adds text for screen readers where icons and graphics stand alone.
  • The server renders the starting state in full, JavaScript only adds the interaction.

Motion

  • Rises in briefly the first time it comes into view (kit-rise, useInView).
  • Brings animations of its own, calmly timed and without wobble.
  • With reduced motion (prefers-reduced-motion) it stays still. 23 places in the code switch motion off then.

Frequent questions

How do I install Features?

With aiw add @ai-website/features. The command puts components/ui/features.tsx into your project, the code is yours from then on. It brings along icon, section, reveal and motion. It needs no further npm packages.

Which variants does Features have?

15 variants, Icon grid, Cards, Two-column list, Alternating, Tabs with visual, Bento with three tiles, Bento with four tiles, Bento mosaic, Bento with uneven columns, With screenshot, Centered, Numbered steps, Comparison cards, Compact icon row and Spotlight grid. You pick one with the variant prop, for example variant="cards".

Can I translate the texts of Features?

Yes. Features carries 3 texts of its own in English and German, such as “Learn more”, “Features” and “Step”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Features?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Features with aiw_components and install it with aiw_add @ai-website/features. Name the variant in your prompt, for example variant="grid", and the assistant writes your content straight into the props.

Can I adjust Features without code?

Yes, in the Studio. All 15 variants are editable there, texts, lists and switches. The Studio writes the matching Features code to copy.

Similar components

More from Marketing, the same area of the kit.

Often combined with

Sections that usually sit next to Features on a page.

Often searched

Jump to

Copied to the clipboard