Cards
Feature cards create visual navigation points within documentation. They're ideal for section overviews, getting-started guides, and highlighting key areas of your documentation.
Overview
The FeatureCard component renders a clickable card with an icon, title, description, and a “Learn more” call to action. Cards include hover effects and are fully accessible.
Feature cards
Individual cards with icons:
Getting Started
Learn the basics and set up your first documentation project.
Components
Browse the library of reusable documentation components.
API Reference
Complete API documentation with type definitions and examples.
Configuration
Customise every aspect of the documentation template.
Grid layouts
Cards work naturally in CSS Grid layouts. Use Tailwind's grid utilities to create responsive grids:
Performance
Optimised for speed with Turbopack and React Compiler.
Security
Built-in sanitisation and hardening for user content.
Developer Experience
Hot reloading, TypeScript support, and intuitive APIs.
Usage
import { FeatureCard } from "@/components/docs/feature-card"
import { RocketIcon } from "lucide-react"
export function SectionOverview() {
return (
<div className="grid gap-4 sm:grid-cols-2">
<FeatureCard
title="Getting Started"
description="Learn the basics."
href="/docs"
icon={<RocketIcon className="h-4 w-4" />}
/>
</div>
)
}