FeatureCard
Icon + title + description card for landing and onboarding pages
SSR mode
Examples
Icon, title and description
Automatic backups
Daily snapshots of your data, retained for 30 days.
With Footer slot
Usage limits
Monitor your monthly API call allowance.
Borderless variant (no icon)
Simple feature
A minimal card with borders and background stripped away.
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| FeatureCard | A vertically-stacked card combining an optional icon, a title, an optional description, and an optional footer slot. Designed for landing pages, onboarding flows, and feature-highlight grids. Wrapper-styling. |
FeatureCard
A vertically-stacked card combining an optional icon, a title, an optional description, and an optional footer slot. Designed for landing pages, onboarding flows, and feature-highlight grids. Wrapper-styling.
| Property | Type | Required | Description |
|---|---|---|---|
| IconSvg | string? | SVG path string for the leading icon. Rendered at size-8 text-primary. Omit to suppress the icon. | |
| Title | string | Card heading. Rendered as <h3> in text-base font-semibold. Default: empty string. | |
| Description | string? | Supporting text in text-sm text-muted-foreground. Omit to suppress. | |
| Footer | RenderFragment? | Optional slot rendered below the description — use for actions, links, or status. | |
| Borders | bool | Toggles border border-border rounded-lg. Default: true. | |
| BgFilled | bool | Toggles bg-background. Default: true. | |
| Gutters | bool | Toggles p-6 gap-4 on the card wrapper. Default: true. |