import { TallBackgroundImagesFeature } from "@/components/email/tall-background-images-feature";
import { defaultTheme } from "@/components/email/theme-default";
export function TallBackgroundImagesFeatureDemo() {
return (
<TallBackgroundImagesFeature
logoPosition="top-left"
titleWidth="split"
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/mjml-react/tall-background-images-feature
Usage
import { TallBackgroundImagesFeature } from "@/components/email/tall-background-images-feature";<TallBackgroundImagesFeature logoPosition="top-left" titleWidth="split" />Examples
Feature with double tall background images
logo top-left
import { TallBackgroundImagesFeature } from "@/components/email/tall-background-images-feature";
export function TallBackgroundImagesFeatureLogoPositionTopLeftTitleWidthSplitExampleDemo() {
return (
<TallBackgroundImagesFeature logoPosition="top-left" titleWidth="split" />
);
}logo top-right
import { TallBackgroundImagesFeature } from "@/components/email/tall-background-images-feature";
export function TallBackgroundImagesFeatureTitleWidthSplitLogoPositionTopRightExampleDemo() {
return (
<TallBackgroundImagesFeature titleWidth="split" logoPosition="top-right" />
);
}logo bottom-left
import { TallBackgroundImagesFeature } from "@/components/email/tall-background-images-feature";
export function TallBackgroundImagesFeatureTitleWidthSplitLogoPositionBottomLeftExampleDemo() {
return (
<TallBackgroundImagesFeature
titleWidth="split"
logoPosition="bottom-left"
/>
);
}logo bottom-right
import { TallBackgroundImagesFeature } from "@/components/email/tall-background-images-feature";
export function TallBackgroundImagesFeatureTitleWidthSplitLogoPositionBottomRightExampleDemo() {
return (
<TallBackgroundImagesFeature
titleWidth="split"
logoPosition="bottom-right"
/>
);
}Feature with full title and tall background images
logo top-left
import { TallBackgroundImagesFeature } from "@/components/email/tall-background-images-feature";
export function TallBackgroundImagesFeatureTitleWidthFullLogoPositionTopLeftExampleDemo() {
return (
<TallBackgroundImagesFeature titleWidth="full" logoPosition="top-left" />
);
}logo top-right
import { TallBackgroundImagesFeature } from "@/components/email/tall-background-images-feature";
export function TallBackgroundImagesFeatureTitleWidthFullLogoPositionTopRightExampleDemo() {
return (
<TallBackgroundImagesFeature titleWidth="full" logoPosition="top-right" />
);
}logo bottom-left
import { TallBackgroundImagesFeature } from "@/components/email/tall-background-images-feature";
export function TallBackgroundImagesFeatureTitleWidthFullLogoPositionBottomLeftExampleDemo() {
return (
<TallBackgroundImagesFeature titleWidth="full" logoPosition="bottom-left" />
);
}logo bottom-right
import { TallBackgroundImagesFeature } from "@/components/email/tall-background-images-feature";
export function TallBackgroundImagesFeatureTitleWidthFullLogoPositionBottomRightExampleDemo() {
return (
<TallBackgroundImagesFeature
titleWidth="full"
logoPosition="bottom-right"
/>
);
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
heading | string | - | Configures the component's heading. |
body | string | - | Configures the component's body. |
images | [{ src: string; alt?: string }, { src: string; alt?: string }] | - | Configures the component's images. |
logo | { src: string; alt?: string } | - | Configures the component's logo. |
action | { href: string; label: string; iconSrc?: string } | - | Configures the component's action. |
logoPosition | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-left" | Configures the component's logoposition. |
titleWidth | "split" | "full" | "split" | Configures the component's titlewidth. |