# Features

> Benefits as a 3-up icon grid, alternating rows with media, or a list.

URL: https://apogee.avaui.dev/docs/sections/features
Last updated: 2026-10-15

Benefits as a 3-up icon grid, alternating rows with media, or a list.

Last updated October 15, 2026

```astro
<Features eyebrow="Why Apogee" heading="Built for real pages" items={[{ icon, title, description, href? }, …]} />
```

## Add

```sh
npx @ava-ui/apogee add features
```

## API

| Prop | Type | Default | Category | Description |
| --- | --- | --- | --- | --- |
| `eyebrow`, `heading`, `description` | `string` | — | content | Section header (heading optional). |
| `items` | `{ icon?, title, description, href?, media? }[]` | — | content | Required. `icon` is one of `check zap shield globe sparkles layers lock rocket gauge heart`; `media` is used by `alternating`. |
| `label` | `string` | English | content | Landmark name when there is no heading. |
| `linkLabel` | `string` | `'Learn more'` | content | Item link text; an item’s own `linkLabel` wins. |
| `layout` | `'grid' \| 'alternating' \| 'list'` | `'grid'` | layout |  |
| `align` | `'start' \| 'center'` | `'start'` | layout |  |
| `background`, `spacing`, `headingLevel`, `id` |  |  | layout | As on every section. Item titles sit one level below `headingLevel`. |

## Layouts

```astro
<Features layout="alternating" items={[{ title, description, media: { src, alt } }, …]} />
```

```astro
<Features layout="list" items={…} />
<Features align="center" background="neutral-faded" items={…} />
```

## Accessibility

-   Item titles are headings one level below the section heading, so the outline stays in order.
-   Icons are decorative (`aria-hidden`); meaning is in the title.