A two-column card grid section with a serif heading, subheading, and an image plus copy in each card, with optional subtle entrance animation.
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}
/>
);
}