Featured Video
Installation
Run the following command
npx vibes@latest add featured-videoUsage
import { FeaturedVideo } from '@/vibes/soul/sections/featured-video';function Usage() { return ( <FeaturedVideo cta={{ href: '#', label: 'Shop Now' }} description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt labore et dolore magna aliqua." mediaAlign="full" title="Pro-Team" video="https://storage.googleapis.com/s.mkswft.com/RmlsZTo3YWVmYWNlYy1iMjllLTRlMmItOTQ1Ny00MjUyYjlkYWVlOGU=/riding-bike-on-road.mp4" /> );}API Reference
FeaturedVideoProps
| Prop | Type | Default |
|---|---|---|
title* | string | |
description* | string | |
video* | string | |
cta* | Link | |
mediaAlign | 'left' | 'right' | 'full' | 'left' |
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-video-background: var(--primary-shadow); --featured-video-video-background: color-mix(in oklab, var(--primary) 10%, transparent); --featured-video-title-font-family: var(--font-family-heading); --featured-video-font-family: var(--font-family-body); --featured-video-title: var(--background); --featured-video-description: var(--background);}