Feature Grid
Installation
Run the following command
npx vibes@latest add feature-gridUsage
import { FeatureGrid, FeatureGridProps } from '@/vibes/soul/sections/feature-grid';function Usage() { return <FeatureGrid cta={feature.cta} grid={feature.grid} image={feature.image} />;}const feature: FeatureGridProps = { image: { src: 'https://storage.googleapis.com/s.mkswft.com/RmlsZTowODYwYTY2NC02NjdjLTRhODYtYTUxYy1jOWExNzI5YTdjMDk=/everyday-tote.jpeg', alt: 'string', }, cta: { href: '#', label: 'Shop Now', }, grid: [ { icon: 'truck', title: 'Free Shipping', description: 'On orders over $250', }, { icon: 'rotate-ccw', title: 'Free Returns', description: 'On full priced items only', }, { icon: 'star', title: '2 Year Warranty', description: 'As standard', }, { icon: 'truck', title: 'Free Shipping', description: 'On orders over $250', }, { icon: 'rotate-ccw', title: 'Free Returns', description: 'On full priced items only', }, { icon: 'star', title: '2 Year Warranty', description: 'As standard', }, ],};API Reference
FeatureGridProps
| Prop | Type | Default |
|---|---|---|
image* | Image | |
grid* | GridItem[] | |
cta* | Link |
GridItem
| Prop | Type | Default |
|---|---|---|
icon* | IconName | |
title* | string | |
description* | string |
Refer to the Lucide docs for a full list of available icons.
Image
| Prop | Type | Default |
|---|---|---|
src* | string | |
alt* | string |
Link
| Prop | Type | Default |
|---|---|---|
href* | string | |
label* | string |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --feature-grid-background: var(--primary-shadow); --feature-grid-image-background: color-mix(in oklab, var(--primary) 10%, transparent); --feature-grid-font-family: var(--font-family-body); --feature-grid-icon: var(--background); --feature-grid-title: var(--background); --feature-grid-description: var(--contrast-200);}