import { ImageGridHero } from "@/components/email/image-grid-hero";
import { defaultTheme } from "@/components/email/theme-default";
export function ImageGridHeroDemo() {
return (
<ImageGridHero
imagePosition="bottom"
offset={false}
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/jsx-email/image-grid-hero
Usage
import { ImageGridHero } from "@/components/email/image-grid-hero";<ImageGridHero imagePosition="bottom" offset={false} />Examples
Hero with image grid
images bottom
import { ImageGridHero } from "@/components/email/image-grid-hero";
export function ImageGridHeroImagePositionBottomOffsetFalseExampleDemo() {
return <ImageGridHero imagePosition="bottom" offset={false} />;
}images top
import { ImageGridHero } from "@/components/email/image-grid-hero";
export function ImageGridHeroImagePositionTopOffsetFalseExampleDemo() {
return <ImageGridHero imagePosition="top" offset={false} />;
}offset images bottom
import { ImageGridHero } from "@/components/email/image-grid-hero";
export function ImageGridHeroImagePositionBottomOffsetExampleDemo() {
return <ImageGridHero imagePosition="bottom" offset />;
}offset images top
import { ImageGridHero } from "@/components/email/image-grid-hero";
export function ImageGridHeroImagePositionTopOffsetExampleDemo() {
return <ImageGridHero imagePosition="top" offset />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
content | { eyebrow?: string; heading?: string; emphasis?: string; subheading?: string; description?: string; price?: string; actions?: Array<{ href: string; label: string }> } | - | Configures the component's content. |
images | Array<{ src: string; alt?: string }> | - | Configures the component's images. |
brand | { logo: { src: string; alt?: string }; href?: string } | - | Configures the component's brand. |
imagePosition | "top" | "bottom" | "bottom" | Configures the component's imageposition. |
offset | boolean | false | Configures the component's offset. |