import { HorizontalBlogPost } from "@/components/email/horizontal-blog-post";
import { defaultTheme } from "@/components/email/theme-default";
export function HorizontalBlogPostDemo() {
return (
<HorizontalBlogPost
surface="plain"
media="single"
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/mjml-react/horizontal-blog-post
Usage
import { HorizontalBlogPost } from "@/components/email/horizontal-blog-post";<HorizontalBlogPost surface="plain" media="single" />Examples
Single post horizontal
default
import { HorizontalBlogPost } from "@/components/email/horizontal-blog-post";
export function HorizontalBlogPostSurfacePlainMediaSingleExampleDemo() {
return <HorizontalBlogPost surface="plain" media="single" />;
}Blog post horizontal boxed
default
import { HorizontalBlogPost } from "@/components/email/horizontal-blog-post";
export function HorizontalBlogPostSurfaceBoxedMediaSingleExampleDemo() {
return <HorizontalBlogPost surface="boxed" media="single" />;
}Blog post horizontal boxed with split images
default
import { HorizontalBlogPost } from "@/components/email/horizontal-blog-post";
export function HorizontalBlogPostSurfaceBoxedMediaSplitExampleDemo() {
return <HorizontalBlogPost surface="boxed" media="split" />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
post | { title: string; excerpt?: string; image?: { alt?: string; src: string }; author?: string; badge?: string; date?: string; month?: string; episode?: string; host?: string } | - | Configures the component's post. |
surface | "plain" | "boxed" | "plain" | Configures the component's surface. |
media | "single" | "split" | "single" | Configures the component's media. |