import { FeaturedImageGrid } from "@/components/email/featured-image-grid";
import { defaultTheme } from "@/components/email/theme-default";
export function FeaturedImageGridDemo() {
return (
<FeaturedImageGrid
columns={2}
featurePosition="top"
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/mjml-react/featured-image-grid
Usage
import { FeaturedImageGrid } from "@/components/email/featured-image-grid";<FeaturedImageGrid columns={2} featurePosition="top" />Examples
2-column image grid with full-width feature
feature top
import { FeaturedImageGrid } from "@/components/email/featured-image-grid";
export function FeaturedImageGridColumns2FeaturePositionTopExampleDemo() {
return <FeaturedImageGrid columns={2} featurePosition="top" />;
}feature top overlay
import { FeaturedImageGrid } from "@/components/email/featured-image-grid";
export function FeaturedImageGridColumns2FeaturePositionTopOverlayExampleDemo() {
return <FeaturedImageGrid columns={2} featurePosition="top" overlay={true} />;
}feature bottom
import { FeaturedImageGrid } from "@/components/email/featured-image-grid";
export function FeaturedImageGridColumns2FeaturePositionBottomOverlayFalseExampleDemo() {
return (
<FeaturedImageGrid columns={2} featurePosition="bottom" overlay={false} />
);
}feature bottom overlay
import { FeaturedImageGrid } from "@/components/email/featured-image-grid";
export function FeaturedImageGridColumns2FeaturePositionBottomOverlayExampleDemo() {
return (
<FeaturedImageGrid columns={2} featurePosition="bottom" overlay={true} />
);
}3-column image grid with full-width feature
feature top
import { FeaturedImageGrid } from "@/components/email/featured-image-grid";
export function FeaturedImageGridColumns3FeaturePositionTopOverlayFalseExampleDemo() {
return (
<FeaturedImageGrid columns={3} featurePosition="top" overlay={false} />
);
}feature top overlay
import { FeaturedImageGrid } from "@/components/email/featured-image-grid";
export function FeaturedImageGridColumns3FeaturePositionTopOverlayExampleDemo() {
return <FeaturedImageGrid columns={3} featurePosition="top" overlay={true} />;
}feature bottom
import { FeaturedImageGrid } from "@/components/email/featured-image-grid";
export function FeaturedImageGridColumns3FeaturePositionBottomOverlayFalseExampleDemo() {
return (
<FeaturedImageGrid columns={3} featurePosition="bottom" overlay={false} />
);
}feature bottom overlay
import { FeaturedImageGrid } from "@/components/email/featured-image-grid";
export function FeaturedImageGridColumns3FeaturePositionBottomOverlayExampleDemo() {
return (
<FeaturedImageGrid columns={3} featurePosition="bottom" overlay={true} />
);
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
images | Array<{ src: string; alt?: string; href?: string; heading?: string; subtext?: string }> | - | Configures the component's images. |
feature | { src: string; alt?: string; href?: string; heading?: string; subtext?: string } | - | Configures the component's feature. |
columns | 2 | 3 | 2 | Configures the component's columns. |
featurePosition | "top" | "bottom" | "top" | Configures the component's featureposition. |
overlay | boolean | false | Configures the component's overlay. |