Grid Content Cards

Responsive two-column grid: each item is a Card with title, description, and an image inset on the sides and flush to the bottom.

Loading block…

Implementation

npx shadcn@latest add @flx/grid-content-cards

Usage

grid-content-cards-example.tsx

import {
  GridContentCards,
  type GridContentCardsProps,
} from './grid-content-cards'

export function GridContentCardsExample() {
  const values = {
    items: [
      {
        title: 'From idea to interface',
        description:
          'Start with a clear concept. Turn it into a clean, focused layout without the clutter.',
        media: {
          src: 'https://images.unsplash.com/photo-1776011469177-6035c9c6d6a9?q=80&w=1176&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
          alt: 'Workspace with clean layout',
        },
      },
      {
        title: 'Ship with confidence',
        description:
          'Documented, consistent, and ready to adapt to your stack and your team.',
        media: {
          src: 'https://images.unsplash.com/photo-1734808215019-5e37cae896b4?q=80&w=1180&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
          alt: 'Developer at work',
        },
      },
    ],
  } satisfies GridContentCardsProps

  return <GridContentCards items={values.items} />
}