Typography

These components handle text rendering and other common content elements. They are imported from hono-email:

import {
  Text,
  Heading,
  Link,
  Button,
  Img,
  Hr,
  CodeInline,
  CodeBlock,
  List,
  ListItem,
} from 'hono-email'

---

<Text>

Paragraph element with email-friendly defaults.

Defaults: font-size: 14px, line-height: 24px, margin: 16px 0

Accepts all standard <p> attributes and style to override defaults.

<Text style={{ color: '#374151', fontSize: '16px' }}>Thanks for signing up.</Text>

<Heading>

Heading element with shorthand margin props.

<Heading as="h2" mt={0} mb={16}>
  Account summary
</Heading>

as Optional

Type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' · Default: 'h1'

Margin shorthands Optional

m, mx, my, mt, mr, mb, ml — shorthand margin props. Numbers are converted to pixels.

<Link>

Anchor element. Requires href.

<Link href="https://example.com/account">View your account</Link>

href Required

Type: string

target Optional

Type: string · Default: '_blank'

<Button>

Call-to-action link rendered with Outlook-compatible button padding.

<Button
  href="https://example.com/confirm"
  style={{
    backgroundColor: '#111827',
    color: '#ffffff',
    padding: '12px 24px',
    borderRadius: '6px',
  }}
>
  Confirm your email
</Button>

href Required

Type: string

target Optional

Type: string · Default: '_blank'

<Img>

Image element. src and alt are both required.

<Img src="https://example.com/logo.png" alt="Company Logo" width={120} height={40} />

src Required

Type: string

alt Required

Type: string

Descriptive alt text for accessibility and clients that block images.

<Hr>

Horizontal rule.

Default: border-top: 1px solid #eaeaea, width: 100%

<Text>Order details</Text>
<Hr />
<Text>Total: $42.00</Text>

<CodeInline>

Inline code span.

Defaults: font-family: monospace, background: #f3f4f6, font-size: 13px, padding: 2px 4px

<Text>
  Run <CodeInline>npm install hono-email</CodeInline> to get started.
</Text>

<CodeBlock>

Preformatted code block.

Defaults: font-family: monospace, background: #f3f4f6, font-size: 13px, white-space: pre-wrap

<CodeBlock>{`curl -X POST https://api.example.com/send`}</CodeBlock>

<List> / <ListItem>

Ordered or unordered lists.

<List ordered>
  <ListItem>Confirm your email address</ListItem>
  <ListItem>Set up your profile</ListItem>
  <ListItem>Invite your team</ListItem>
</List>

ordered Optional

Type: boolean

Render an <ol> when true, <ul> otherwise.

marker Optional

Type: string

CSS list-style-type value (e.g. 'disc', 'decimal', '"→ "').