import { BackgroundCallToAction } from "@/components/email/background-call-to-action";
import { defaultTheme } from "@/components/email/theme-default";
export function BackgroundCallToActionDemo() {
return (
<BackgroundCallToAction
width="flush"
appearance="light"
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/mjml-react/background-call-to-action
Usage
import { BackgroundCallToAction } from "@/components/email/background-call-to-action";<BackgroundCallToAction width="flush" appearance="light" />Examples
CTA with background image
flush
import { BackgroundCallToAction } from "@/components/email/background-call-to-action";
export function BackgroundCallToActionWidthFlushAppearanceLightExampleDemo() {
return <BackgroundCallToAction width="flush" appearance="light" />;
}boxed
import { BackgroundCallToAction } from "@/components/email/background-call-to-action";
export function BackgroundCallToActionContentCardFalseWidthBoxedAppearanceLightExampleDemo() {
return (
<BackgroundCallToAction
contentCard={false}
width="boxed"
appearance="light"
/>
);
}padded
import { BackgroundCallToAction } from "@/components/email/background-call-to-action";
export function BackgroundCallToActionContentCardFalseWidthPaddedAppearanceLightExampleDemo() {
return (
<BackgroundCallToAction
contentCard={false}
width="padded"
appearance="light"
/>
);
}Boxed CTA with background image
flush light
import { BackgroundCallToAction } from "@/components/email/background-call-to-action";
export function BackgroundCallToActionContentCardWidthFlushAppearanceLightExampleDemo() {
return (
<BackgroundCallToAction contentCard width="flush" appearance="light" />
);
}flush dark
import { BackgroundCallToAction } from "@/components/email/background-call-to-action";
export function BackgroundCallToActionContentCardWidthFlushAppearanceDarkExampleDemo() {
return <BackgroundCallToAction contentCard width="flush" appearance="dark" />;
}padded light
import { BackgroundCallToAction } from "@/components/email/background-call-to-action";
export function BackgroundCallToActionContentCardWidthPaddedAppearanceLightExampleDemo() {
return (
<BackgroundCallToAction contentCard width="padded" appearance="light" />
);
}padded dark
import { BackgroundCallToAction } from "@/components/email/background-call-to-action";
export function BackgroundCallToActionContentCardWidthPaddedAppearanceDarkExampleDemo() {
return (
<BackgroundCallToAction contentCard width="padded" appearance="dark" />
);
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
heading | string | "Welcome to Your Workspace" | Configures the component's heading. |
description | string | - | Configures the component's description. |
emphasis | string | - | Configures the component's emphasis. |
actions | Array<{ href: string; label: string }> | - | Configures the component's actions. |
backgroundImage | { src: string; alt?: string } | - | Configures the component's backgroundimage. |
width | "flush" | "boxed" | "padded" | "flush" | Configures the component's width. |
contentCard | boolean | false | Configures the component's contentcard. |
appearance | "light" | "dark" | "light" | Configures the component's appearance. |