FeatureGrid

Responsive grid of feature cards with optional icon, title, description, and link.

The FeatureGrid component from @publier/shell renders a responsive grid of feature cards. Use it on landing pages, product-overview sections, or feature matrices.

Usage

import { FeatureGrid } from '@publier/shell/components';

<FeatureGrid
  columns={3}
  items={[
    {
      icon: '⚡',
      title: 'Zero-config build',
      description: 'Drop in MDX, run `publier build`, ship.',
      href: '/docs/getting-started',
    },
    {
      icon: '🎨',
      title: '14 built-in themes',
      description: 'Swap themes with a single YAML value.',
      href: '/docs/theming',
    },
    {
      icon: '🔍',
      title: 'Search that works offline',
      description: 'Pagefind-powered, built into every site.',
      href: '/docs/ui-components/search-dialog',
    },
  ]}
/>

Props

`FeatureGrid`

Prop	Type	Default	Description
`items`	`FeatureGridItem[]`	required	Array of feature cards.
`columns`	`2 \| 3 \| 4`	`3`	Desktop column count.

`FeatureGridItem`

Prop	Type	Default	Description
`title`	`string`	required	Feature title.
`description`	`string`	required	Short description paragraph.
`icon`	`string`	`undefined`	Emoji, unicode glyph, or short icon label rendered above the title.
`href`	`string`	`undefined`	Optional link. If provided, the whole card becomes clickable.

Behaviour

Each card is an <article> element.
When href is set, the card is overlaid with a full-size anchor; a visually-hidden "Learn more about {title}" link text is included for screen readers.
Icon is only rendered when provided.