import { CollageCallToAction } from "@/components/email/collage-call-to-action";
import { defaultTheme } from "@/components/email/theme-default";
export function CollageCallToActionDemo() {
return (
<CollageCallToAction
treatment="side"
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/react-email/collage-call-to-action
Usage
import { CollageCallToAction } from "@/components/email/collage-call-to-action";<CollageCallToAction treatment="side" />Examples
CTA with shifted images
side
import { CollageCallToAction } from "@/components/email/collage-call-to-action";
export function CollageCallToActionTreatmentSideExampleDemo() {
return <CollageCallToAction treatment="side" />;
}offset
import { CollageCallToAction } from "@/components/email/collage-call-to-action";
export function CollageCallToActionTreatmentOffsetExampleDemo() {
return <CollageCallToAction treatment="offset" />;
}shifted
import { CollageCallToAction } from "@/components/email/collage-call-to-action";
export function CollageCallToActionTreatmentShiftedExampleDemo() {
return <CollageCallToAction treatment="shifted" />;
}collage
import { CollageCallToAction } from "@/components/email/collage-call-to-action";
export function CollageCallToActionTreatmentCollageExampleDemo() {
return <CollageCallToAction treatment="collage" />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
heading | string | - | Configures the component's heading. |
description | string | - | Configures the component's description. |
action | { href: string; label: string } | - | Configures the component's action. |
images | Array<{ src: string; alt?: string }> | - | Configures the component's images. |
treatment | "offset" | "shifted" | "side" | "collage" | "side" | Configures the component's treatment. |