Content Grid With Media and CTA

CTAs 8

About

A two-column content grid section that pairs an image with a heading, body copy, and an optional call-to-action button per column, with a subtle scroll-reveal animation.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Content Grid With Media and CTA to your project and fits it to your theme.

Code

How Content Grid With Media and CTA is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Content07, type Content07Props } from "@/components/ui/content-07";

const values = {
  title: "Two ways to move faster",
  description:
    "Pair a strong visual with clear copy and an optional action — side by side.",
  variant: "standard",
  animation: "subtle",
  items: [
    {
      title: "Design",
      content:
        "Clean, accessible components that make your product feel modern and easy to use.",
      media: {
        src: "https://cdn.21st.dev/assets/mirror/72/72baf1d11f337161e880e290ad4348ab0701efa6f039efcdd95d2b1a91a0be9a.jpg",
        alt: "alt image",
      },
      cta: {
        ctaEnabled: true,
        text: "Learn more",
        link: "",
        variant: "outline",
      },
    },
    {
      title: "Developer Experience",
      content:
        "Built with TypeScript, clear APIs, and documentation that gets you shipping faster.",
      media: {
        src: "https://cdn.21st.dev/assets/mirror/8c/8cad1d81dc7bc99ad4bdd6def35fc3fb82eb1f20b11aea2fcf4457ab94752578.jpg",
        alt: "alt image",
      },
      cta: {
        ctaEnabled: true,
        text: "Get started",
        link: "",
        variant: "outline",
      },
    },
  ],
} satisfies Content07Props;

export default function Content07Demo() {
  return (
    <Content07
      title={values.title}
      description={values.description}
      items={values.items}
      variant={values.variant}
      animation={values.animation}
    />
  );
}