Icon Block
Installation
Run the following command
npx vibes@latest add icon-block
Usage
import { IconBlock } from '@/vibes/soul/sections/icon-block';function Usage() { return ( <IconBlock list={list} /> );}const list= [ { 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', },];
API Reference
IconBlockProps
Prop | Type | Default |
---|---|---|
list* | ListItem[] |
ListItem
Prop | Type | Default |
---|---|---|
icon* | IconName | |
title* | string | |
description* | string |
Refer to the Lucide docs for a full list of available icons.
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --icon-block-background: var(--background); --icon-block-border: var(--contrast-100); --icon-block-font-family: var(--font-family-body); --icon-block-title: var(--foreground); --icon-block-description: var(--contrast-400); --icon-block-icon: var(--foreground);}