Astro components
Main features
Highlights key features in a grid layout.
A section component for highlighting main features, often with images or interactive components.
Usage
---
import MainFeatures from '@/components/MainFeatures.astro';
---
const features = [
{
title: 'Easy to Use',
description: 'Get started in minutes.',
image: '/assets/feature1.png',
link: '/docs'
}
];
<MainFeatures items={features} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | MainFeatureItems[] | - | Array of feature items to display. |
class | string | - | Additional CSS classes. |
MainFeatureItems Interface
interface MainFeatureItems {
title: string;
description: string;
image?: ImageMetadata;
componentType?: 'code' | 'files' | 'analytics'; // For rendering specific interactive components
link?: string;
}