Feature Card
Display a feature with icon, title, and description. Perfect for landing pages and feature showcases.
Preview
Installation
Terminalbash
Usage
Reacttsx
Examples
Static
Amazing Feature
This is a static card without a link. Great for non-interactive displays.
RTL Support
FeatureCard automatically adapts to RTL layouts. The icon and text alignment mirror based on the current direction.
Reacttsx
Props
| Name | Type | Default | Description |
|---|---|---|---|
titleRequired | string | — | The title/heading of the feature card |
descriptionRequired | string | — | The description text explaining the feature |
iconRequired | LucideIcon | — | Lucide icon component to display |
href | string | — | Optional link URL. When provided, the card becomes clickable |
className | string | — | Additional CSS classes to apply |
Best Practices
Do
- ✓ Use meaningful icons that represent the feature
- ✓ Keep titles short and descriptive (2-5 words)
- ✓ Provide clear, benefit-focused descriptions
- ✓ Use consistent icon style across all feature cards
- ✓ Ensure adequate spacing between cards for visual clarity
Don't
- ✗ Don't use for long-form content
- ✗ Don't use different icon styles within the same section
- ✗ Don't overcrowd the layout with too many features at once
- ✗ Don't use vague titles or descriptions
- ✗ Don't neglect to provide icons when showcasing features