import { AvatarCallToAction } from "@/components/email/avatar-call-to-action";
import { defaultTheme } from "@/components/email/theme-default";
export function AvatarCallToActionDemo() {
return (
<AvatarCallToAction
placement="inline"
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/mjml-react/avatar-call-to-action
Usage
import { AvatarCallToAction } from "@/components/email/avatar-call-to-action";<AvatarCallToAction placement="inline" />Examples
CTA with team avatars
default
import { AvatarCallToAction } from "@/components/email/avatar-call-to-action";
export function AvatarCallToActionPlacementInlineExampleDemo() {
return <AvatarCallToAction placement="inline" />;
}avatars top
import { AvatarCallToAction } from "@/components/email/avatar-call-to-action";
export function AvatarCallToActionPlacementTopExampleDemo() {
return <AvatarCallToAction placement="top" />;
}single avatar
import { AvatarCallToAction } from "@/components/email/avatar-call-to-action";
import { emailAsset } from "@/components/email/email-assets";
export function AvatarCallToActionPlacementInlineAvatarsExampleDemo() {
return (
<AvatarCallToAction
placement="inline"
avatars={[
{
alt: "Team member",
src: emailAsset("avatars/avatar-1.jpg"),
},
]}
/>
);
}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. |
actions | Array<{ href: string; label: string }> | - | Configures the component's actions. |
avatars | Array<{ src: string; alt?: string }> | - | Configures the component's avatars. |
placement | "top" | "inline" | "inline" | Configures the component's placement. |