Split Content Section

Heroes 8

About

A two-column content section pairing a serif headline and supporting copy with an optional call-to-action button and an adjacent media image, with optional scroll-triggered reveal animation.

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

Code

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

Usage.tsx

import { Content06, type Content06Props } from "@/components/ui/content-06";

export const values = {
  title: "Ship with confidence",
  description:
    "Built with TypeScript, clear APIs, and documentation that gets you moving faster.",
  variant: "standard",
  animation: "subtle",
  media: {
    src: "https://cdn.21st.dev/assets/mirror/72/72baf1d11f337161e880e290ad4348ab0701efa6f039efcdd95d2b1a91a0be9a.jpg",
    alt: "alt image",
  },
  cta: {
    ctaEnabled: true,
    text: "Get started",
    link: "",
    variant: "default",
  },
} satisfies Content06Props;

export default function Content06Example() {
  return (
    <Content06
      title={values.title}
      description={values.description}
      media={values.media}
      cta={values.cta}
      variant={values.variant}
      animation={values.animation}
    />
  );
}