Marketing

Features Section

A features showcase with optional eyebrow, headline, and subheading, followed by a responsive card grid. Each card supports an icon, title, and description. Supports 2, 3, or 4 column layouts and a list variant.

Features

Everything you need to ship

Production-ready components, tokens, patterns, and blocks — all in one system.

Open code

Copy components directly into your project. You own and control every file.

Token-driven

Every visual value is a CSS custom property. Override anything without forking.

Accessible

Built on Radix UI primitives with WCAG 2.1 AA compliance out of the box.

Dark mode

Light and dark themes via CSS variables. Respects system preference automatically.

TypeScript

Fully typed props and exported interfaces for every component.

CLI installer

One command to add any component, pattern, or block to your project.

import { FeaturesSection } from "@aetherstack/blocks"

Installation

terminal

npx aether-ui add features-section

Import

import.tsx

import { FeaturesSection } from "@aetherstack/blocks"

Usage

features-section.tsx

import { FeaturesSection } from "@aetherstack/blocks"

export default function FeaturesPage() {
  return (
    <FeaturesSection
      eyebrow="Features"
      headline="Everything you need"
      subheading="Ship production-ready interfaces without starting from scratch."
      cols={3}
      features={[
        { title: "Open code", description: "Copy components directly into your project — you own the source." },
        { title: "Token-driven", description: "Every visual value is a CSS custom property you can override." },
        { title: "Accessible", description: "Built on Radix UI primitives with WCAG 2.1 AA compliance." },
      ]}
    />
  )
}

Props

Prop	Type	Default	Description
features*	{ icon?: ReactNode; title: string; description: string }[]	—	Array of feature items to display.
eyebrow	string	—	Small uppercase label above the headline.
headline	string	—	Section heading.
subheading	string	—	Supporting paragraph below the headline.
cols	2 \| 3 \| 4	3	Grid column count.
layout	'grid' \| 'list'	'grid'	Card grid or alternating list layout.
className	string	—	Additional classes on the section wrapper.

* Required

Accessibility

→Feature icons are decorative; the title and description carry the meaning.
→Uses semantic <section> element for landmark navigation.