Featured Image
Installation
Run the following command
npx vibes@latest add featured-imageUsage
import { FeaturedImage, FeaturedImageProps } from '@/vibes/soul/sections/featured-image';function Usage() { return ( <FeaturedImage cta={featuredImage.cta} description={featuredImage.description} image={featuredImage.image} mediaAlign="left" title={featuredImage.title} /> );}export const featuredImage: FeaturedImageProps = { title: 'Thoughtfully Designed', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua.', image: { src: 'https://storage.googleapis.com/s.mkswft.com/RmlsZToyZGJiZDNlZS05MjM0LTRjOTItYjgxZC1jZTdlMTlkOWFhZGM=/bike-bag.jpeg', alt: 'Close up of a bike bag', }, cta: { href: '#', label: 'Shop Now' },};API Reference
FeaturedImageProps
| Prop | Type | Default |
|---|---|---|
image* | Image | |
title* | string | |
description* | string | |
cta* | Link | |
mediaAlign | 'left' | 'right' | 'full' | 'left' |
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 { --featured-image-background: var(--primary-shadow); --featured-image-image-background: color-mix(in oklab, var(--primary) 10%, transparent); --featured-image-title-font-family: var(--font-family-heading); --featured-image-font-family: var(--font-family-body); --featured-image-title: var(--background); --featured-image-description: var(--background);}