Grid With Media Top

Media on top with information below.

Loading block…

Implementation

npx shadcn@latest add @flx/grid-with-media-top

Usage

grid-with-media-top-example.tsx
import {
  GridWithMediaTop,
  type GridWithMediaTopProps,
} from './grid-with-media-top'

export function GridWithMediaTopExample() {
  const values = {
    media: {
      url: 'https://images.unsplash.com/photo-1765871319901-0aaafe3f1a2a?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      alt: 'Section hero image',
    },
    items: [
      {
        title: 'Lightweight',
        description: 'Only what you need. No bloat, no lock-in.',
      },
      {
        title: 'Customizable',
        description: 'Copy, tweak, and own. Built to fit your design system.',
      },
      {
        title: 'Ready to ship',
        description: 'Stable, accessible, and ready for production.',
      },
    ],
  } satisfies GridWithMediaTopProps

  return <GridWithMediaTop media={values.media} items={values.items} />
}