Content Grid Section

Component 10

About

A two-column card grid section with a serif heading, subheading, and an image plus copy in each card, with optional subtle entrance animation.

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

Code

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

Usage.tsx

import { Content04, type Content04Props } from "@/components/ui/content-04";

export const values = {
  title: "Build with clarity",
  description:
    "Two focused stories, each with a headline, a short explanation, and a visual anchor.",
  variant: "standard",
  animation: "subtle",
  items: [
    {
      title: "Design",
      description:
        "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",
      },
    },
    {
      title: "Components",
      description:
        "Pre-built blocks you can drop into any layout. Customize once, reuse everywhere.",
      media: {
        src: "https://cdn.21st.dev/assets/mirror/5d/5da9ea0a2db6e73a3841df14852cd48b8e3a46cb582c38eb38e086ca74917eb2.jpg",
        alt: "alt image",
      },
    },
  ],
} satisfies Content04Props;

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