Installation
Add the following Soul components
The featured-card-carousel component uses the streamable, animated-link, card, card-carousel and section-layout components. Make sure you have added them to your project.
Copy and paste the following code into your project
sections/featured-card-carousel/index.tsx
import { Streamable } from '@/vibes/soul/lib/streamable';import { AnimatedLink } from '@/vibes/soul/primitives/animated-link';import { type CardContent } from '@/vibes/soul/primitives/card';import { CardCarousel } from '@/vibes/soul/sections/card-carousel';import { SectionLayout } from '@/vibes/soul/sections/section-layout';interface Link { label: string; href: string;}export interface FeaturedCardCarouselProps { title: string; description?: string; cta?: Link; cards: Streamable<CardContent[]>; scrollbarLabel?: string;}/** * This component supports various CSS variables for theming. Here's a comprehensive list, along * with their default values: * * ```css * :root { * --featured-card-carousel-font-family: var(--font-family-body); * --featured-card-carousel-title-font-family: var(--font-family-body); * --featured-card-carousel-title: hsl(var(--foreground)); * --featured-card-carousel-description: hsl(var(--contrast-500)); * } * ``` */export function FeaturedCardCarousel({ title, description, cta, cards, scrollbarLabel,}: FeaturedCardCarouselProps) { return ( <SectionLayout containerSize="2xl"> <div className="mb-6 flex w-full flex-row flex-wrap items-end justify-between gap-x-8 gap-y-6 @4xl:mb-8"> <header className="font-[family-name:var(--featured-card-carousel-font-family,var(--font-family-body))]"> <h2 className="font-[family-name:var(--featured-card-carousel-title-font-family,var(--font-family-heading))] font-heading text-2xl font-medium leading-none text-[var(--featured-card-carousel-title,hsl(var(--foreground)))] @xl:text-3xl @4xl:text-4xl"> {title} </h2> {description != null && description !== '' && ( <p className="mt-3 max-w-xl text-[var(--featured-card-carousel-description,hsl(var(--contrast-500)))]"> {description} </p> )} </header> {cta != null && cta.href !== '' && cta.label !== '' && ( <AnimatedLink className="mr-3" href={cta.href}> {cta.label} </AnimatedLink> )} </div> <div className="group/card-carousel"> <CardCarousel cards={cards} scrollbarLabel={scrollbarLabel} /> </div> </SectionLayout> );}
Usage
import { FeaturedCardCarousel } from '@/vibes/soul/sections/featured-card-carousel';function Usage() { return ( <FeaturedCardCarousel cards={cards} cta={{ label: 'Shop all', href: '/all' }} description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." title="Categories" /> );}const cards: CardContent[] = [ { title: 'Mini Bar Bag', image: { src: 'https://rstr.in/monogram/vibes/mrlTNE1TJfB', alt: 'Mini Bar Bag', }, href: '#', }]
API Reference
FeaturedCardCarouselProps
| Prop | Type | Default |
|---|
title*
| string
| |
description
| string
| |
cta
| | |
cards*
| | |
scrollbarLabel
| string
| |
CardContent
| Prop | Type | Default |
|---|
title*
| string
| |
image
| | |
href
| string
| |
Link
| Prop | Type | Default |
|---|
label*
| string
| |
href*
| string
| |
Image
| Prop | Type | Default |
|---|
src*
| string
| |
alt*
| string
| |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --featured-card-carousel-font-family: var(--font-family-body); --featured-card-carousel-title-font-family: var(--font-family-body); --featured-card-carousel-title: hsl(var(--foreground)); --featured-card-carousel-description: hsl(var(--contrast-500));}
