Featured Blog Post Carousel
Installation
Run the following command
npx vibes@latest add featured-blog-post-carouselUsage
import { FeaturedBlogPostCarousel } from '@/vibes/soul/sections/featured-blog-post-carousel';function Usage() { return ( <FeaturedBlogPostCarousel blogPosts={posts} cta={{ label: 'View all', href: '#' }} title="Plant Life" /> );}const posts = [ { id: '5', title: 'A Guide to Low-Light Houseplants', content: 'Not all plants need bright sunlight to thrive. This guide highlights the best low-light houseplants, perfect for those darker corners of your home or office that need a touch of green.', image: { src: 'https://storage.googleapis.com/s.mkswft.com/RmlsZTo0NGVmOWFkZC00MDc5LTRmMTAtODIyMC0zM2UwNjNkMGRjZDM=/low-light.jpeg', alt: 'Low-Light Houseplants', }, date: '2024-07-20', href: '#', author: 'Author Name', },];API Reference
FeaturedBlogPostCarouselProps
| Prop | Type | Default |
|---|---|---|
className | string | |
title* | string | |
cta | Link | |
blogPosts* | ||
scrollbarLabel | string | |
previousLabel | string | |
nextLabel | string |
Link
| Prop | Type | Default |
|---|---|---|
href* | string | |
label* | string |
BlogPost
| Prop | Type | Default |
|---|---|---|
title* | string | |
author | string | null | |
content* | string | |
date* | string | |
image | {src: string; alt: string; } | null | |
href* | string |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --featured-blog-post-carousel-font-family: var(--font-family-body); --featured-blog-post-carousel-text: var(--foreground);}