Background Media

A background media with a title, description and CTA.

Loading block…

Implementation

npx shadcn@latest add @flx/background-media

Usage

background-media-example.tsx
import { BackgroundMedia, BackgroundMediaProps } from './background-media'

export function BackgroundMediaExample() {
  const values = {
    title: 'Fast. Flexible. Beautiful.',
    description:
      'Clean, modern interfaces with minimal effort and maximum flexibility.',
    whiteTexts: true,
    image: {
      url: 'https://images.unsplash.com/photo-1493993083687-7e4f91383dfa?q=80&w=1263&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      alt: 'Minimal workspace',
    },
    cta: {
      ctaEnabled: true,
      text: 'Get started',
      link: '/',
      variant: 'outline',
    },
  } satisfies BackgroundMediaProps

  return (
    <BackgroundMedia
      title={values.title}
      description={values.description}
      whiteTexts={values.whiteTexts}
      image={values.image}
      cta={values.cta}
    />
  )
}