Themes
Marketing
Ecommerce
One Content component covers titles and paragraphs. Choose type, set
columns to 1 or 2, toggle withIcons for icon-topped columns, and pick a
padding size.
Title
Title with Large Padding
Paragraph
Paragraph with Large Padding
Two Columns
Two Columns with Large Padding
Two Columns with Icons
Two Columns with Icons and Large Padding
Installation
$ pnpm dlx shadcn@latest add @emailcn/content
Usage
import { Content } from "@/components/emails/marketing/content/content";<Content type="title" title="Section Title" />
<Content type="paragraph" text="A single column of body copy." />
<Content type="paragraph" columns={2} column1="Left" column2="Right" />
<Content
type="paragraph"
columns={2}
withIcons
iconSrc1="/icon-1.png"
iconSrc2="/icon-2.png"
column1="Left"
column2="Right"
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
type | "title" | "paragraph" | "paragraph" | Content style |
columns | 1 | 2 | 1 | Column count (paragraph only) |
withIcons | boolean | false | Show an icon above each column (2 columns) |
padding | "regular" | "large" | "regular" | Vertical padding |
title | string | - | Heading text (when type="title") |
text | string | - | Body text (single column) |
column1 / column2 | string | - | Column text (when columns={2}) |
iconSrc1 / iconAlt1 | string | - | First column icon (when withIcons) |
iconSrc2 / iconAlt2 | string | - | Second column icon (when withIcons) |
theme | EmailThemeTokens | defaultTheme | Email theme styling |