import { PortraitFeature } from "@/components/email/portrait-feature";
import { defaultTheme } from "@/components/email/theme-default";
export function PortraitFeatureDemo() {
return (
<PortraitFeature
placement="right"
contentPosition="top"
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/jsx-email/portrait-feature
Usage
import { PortraitFeature } from "@/components/email/portrait-feature";<PortraitFeature placement="right" contentPosition="top" />Examples
Feature with large portrait image
content top left
import { PortraitFeature } from "@/components/email/portrait-feature";
export function PortraitFeatureContentPositionTopPlacementLeftExampleDemo() {
return <PortraitFeature contentPosition="top" placement="left" />;
}content top right
import { PortraitFeature } from "@/components/email/portrait-feature";
export function PortraitFeatureContentPositionTopPlacementRightExampleDemo() {
return <PortraitFeature contentPosition="top" placement="right" />;
}content bottom left
import { PortraitFeature } from "@/components/email/portrait-feature";
export function PortraitFeatureContentPositionBottomPlacementLeftExampleDemo() {
return <PortraitFeature contentPosition="bottom" placement="left" />;
}content bottom right
import { PortraitFeature } from "@/components/email/portrait-feature";
export function PortraitFeatureContentPositionBottomPlacementRightExampleDemo() {
return <PortraitFeature contentPosition="bottom" placement="right" />;
}logo top-left
import { PortraitFeature } from "@/components/email/portrait-feature";
export function PortraitFeatureLogoPositionTopLeftExampleDemo() {
return <PortraitFeature logoPosition="top-left" />;
}logo top-right
import { PortraitFeature } from "@/components/email/portrait-feature";
export function PortraitFeatureLogoPositionTopRightExampleDemo() {
return <PortraitFeature logoPosition="top-right" />;
}logo bottom-left
import { PortraitFeature } from "@/components/email/portrait-feature";
export function PortraitFeatureLogoPositionBottomLeftExampleDemo() {
return <PortraitFeature logoPosition="bottom-left" />;
}logo bottom-right
import { PortraitFeature } from "@/components/email/portrait-feature";
export function PortraitFeatureLogoPositionBottomRightExampleDemo() {
return <PortraitFeature 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. |
primaryImage | { src: string; alt?: string } | - | Configures the component's primaryimage. |
secondaryImage | { src: string; alt?: string } | - | Configures the component's secondaryimage. |
logo | { src: string; alt?: string } | - | Configures the component's logo. |
action | { href: string; label: string; iconSrc?: string } | - | Configures the component's action. |
placement | "left" | "right" | "right" | Configures the component's placement. |
contentPosition | "top" | "bottom" | - | Configures the component's contentposition. |
logoPosition | "top-left" | "top-right" | "bottom-left" | "bottom-right" | Derived from placement | Positions the logo when contentPosition is not set. |