import { ImageFeature } from "@/components/email/image-feature";
import { defaultTheme } from "@/components/email/theme-default";
export function ImageFeatureDemo() {
return (
<ImageFeature
placement="right"
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/mjml-react/image-feature
Usage
import { ImageFeature } from "@/components/email/image-feature";<ImageFeature placement="right" />Examples
Feature with product image
image left
import { ImageFeature } from "@/components/email/image-feature";
export function ImageFeaturePlacementLeftExampleDemo() {
return <ImageFeature placement="left" />;
}image right
import { ImageFeature } from "@/components/email/image-feature";
export function ImageFeaturePlacementRightExampleDemo() {
return <ImageFeature placement="right" />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
heading | string | "Powering every payment." | Configures the component's heading. |
body | string | "Discover tools that make accepting payments faster, easier, and more reliable, wherever you serve customers." | Configures the component's body. |
image | { src: string; alt?: string } | - | Configures the component's image. |
action | { href: string; label: string; iconSrc?: string } | - | Configures the component's action. |
placement | "left" | "right" | "right" | Configures the component's placement. |