Features

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

Last updated

Why Apogee

Built for real pages

Six reasons, three columns on desktop, one on phones.

Fast by default

Static HTML, no runtime, islands only where a browser needs one.

Accessible

Every control keyboard-operable, every pair of colours checked for contrast.

Composable

Sections are built from the same primitives you use in your own pages.

Right to left

Logical properties throughout; flip the document and every section mirrors.

Themed by tokens

Five hues and seven roles; change the brand in one file.

Yours to edit

Copied into your repo, not installed from a package.

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

Add

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

Alternating rows

Fast by default

Static HTML, no runtime, islands only where a browser needs one.

Placeholder photograph

Accessible

Every control keyboard-operable, every pair of colours checked for contrast.

Placeholder photograph

Composable

Sections are built from the same primitives you use in your own pages.

Placeholder photograph
Show code
<Features layout="alternating" items={[{ title, description, media: { src, alt } }, …]} />

As a list

  • Fast by default

    Static HTML, no runtime, islands only where a browser needs one.

  • Accessible

    Every control keyboard-operable, every pair of colours checked for contrast.

  • Composable

    Sections are built from the same primitives you use in your own pages.

  • Right to left

    Logical properties throughout; flip the document and every section mirrors.

Centred on a tint

Fast by default

Static HTML, no runtime, islands only where a browser needs one.

Accessible

Every control keyboard-operable, every pair of colours checked for contrast.

Composable

Sections are built from the same primitives you use in your own pages.

On the brand fill

Fast by default

Static HTML, no runtime, islands only where a browser needs one.

Accessible

Every control keyboard-operable, every pair of colours checked for contrast.

Composable

Sections are built from the same primitives you use in your own pages.

Show code
<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.