Skip to content
Aback UI

Block · Marketing

Feature grid

A titled grid of features with brand icon chips and optional links, joined by hairlines.

Beta1 componentRegistry JSON (opens in a new tab)
the Feature grid preview in a new tab

Desktop at 1280 pixels. The frame scrolls when the block is taller than 900 pixels. Example data is labelled inside the preview.

Installation

One item installs the block and every component it imports.

npx aback-ui@latest add feature-grid

The block lands at components/blocks/feature-grid.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows. Blocks are copied with the CLI; they are not part of the npm package.

Built from

The registry installs these components with the block.

What to customize

  • Use three or four features with icons that mean something. Six is the most a reader will scan.
  • Give a feature an href to make the whole cell one link to its page. The title is the link's name.
  • Pass a unique headingId when a page has more than one feature grid.

Accessibility

  • The section is labelled by its heading, and features are a list of h3s.
  • Icon chips are decorative; the title carries the meaning.
  • Linked cells show a focus ring inside the cell and a hover wash, with no layout shift.