import { ImageStripCallToAction } from "@/components/email/image-strip-call-to-action";
import { defaultTheme } from "@/components/email/theme-default";
export function ImageStripCallToActionDemo() {
return (
<ImageStripCallToAction
placement="right"
width="boxed"
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/jsx-email/image-strip-call-to-action
Usage
import { ImageStripCallToAction } from "@/components/email/image-strip-call-to-action";<ImageStripCallToAction placement="right" width="boxed" />Examples
CTA with image strip
boxed left
import { ImageStripCallToAction } from "@/components/email/image-strip-call-to-action";
export function ImageStripCallToActionWidthBoxedPlacementLeftExampleDemo() {
return <ImageStripCallToAction width="boxed" placement="left" />;
}boxed right
import { ImageStripCallToAction } from "@/components/email/image-strip-call-to-action";
export function ImageStripCallToActionPlacementRightWidthBoxedExampleDemo() {
return <ImageStripCallToAction placement="right" width="boxed" />;
}full left
import { ImageStripCallToAction } from "@/components/email/image-strip-call-to-action";
export function ImageStripCallToActionWidthFullPlacementLeftExampleDemo() {
return <ImageStripCallToAction width="full" placement="left" />;
}full right
import { ImageStripCallToAction } from "@/components/email/image-strip-call-to-action";
export function ImageStripCallToActionWidthFullPlacementRightExampleDemo() {
return <ImageStripCallToAction width="full" placement="right" />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
heading | string | "Join the Adventure" | 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. |
placement | "left" | "right" | "right" | Configures the component's placement. |
width | "boxed" | "full" | "boxed" | Configures the component's width. |