Sequence
docs
Astro components

Feature grid

Displays a grid of features with icons and descriptions.

A component to display a list of features in a responsive grid layout.

Usage

---
import FeatureGrid from '@/components/FeatureGrid.astro';
import { ShareIcon, DownloadIcon } from 'lucide-react';
---

const features = [
  {
    title: 'Share',
    description: 'Share your work with others.',
    icon: ShareIcon,
    link: '/share'
  },
  {
    title: 'Download',
    description: 'Download your data anytime.',
    icon: DownloadIcon,
    link: '/download'
  }
];

<FeatureGrid items={features} />

Props

PropTypeDefaultDescription
itemsFeatureItems[]-Array of feature items to display.
classstring-Class for the section wrapper.
itemClassNamestring-Class for individual item wrappers.

FeatureItems Interface

interface FeatureItems {
  title: string;
  description: string;
  icon?: any; // Component type
  link?: string;
}

On this page