import { TopImageCallToAction } from "@/components/email/top-image-call-to-action";
import { defaultTheme } from "@/components/email/theme-default";
export function TopImageCallToActionDemo() {
return (
<TopImageCallToAction
description="See the latest improvements, workflows, and resources in one place."
heading="Everything new this month"
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/react-email/top-image-call-to-action
Usage
import { TopImageCallToAction } from "@/components/email/top-image-call-to-action";<TopImageCallToAction />Examples
CTA with top large image
default
import { TopImageCallToAction } from "@/components/email/top-image-call-to-action";
export function TopImageCallToActionDefaultExampleDemo() {
return <TopImageCallToAction />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
heading | string | "Built for the journey ahead." | Configures the component's heading. |
description | string | - | Configures the component's description. |
action | { href: string; label: string } | - | Configures the component's action. |
image | { src: string; alt?: string } | - | Configures the component's image. |