Component Reference

Every Inky component transforms simple HTML into email-safe table markup. All layout tables include role="presentation" for accessibility.

Layout Components

<container>

Centers content and sets the max width.

Attributes: class

<container>Content here</container>

Output:

<table role="presentation" align="center" class="container"> <tbody><tr><td>Content here</td></tr></tbody>
</table>

<row>

Creates a horizontal row of columns.

Attributes:

Use collapse when you need columns to touch edge-to-edge (e.g., side-by-side images with no gap):

<row collapse> <column lg="6"><image src="left.jpg" alt="Left" width="290" /></column> <column lg="6"><image src="right.jpg" alt="Right" width="290" /></column>
</row>

<row> <column lg="6">Left</column> <column lg="6">Right</column>
</row>

Output:

<table role="presentation" class="row"> <tbody><tr> <th class="small-12 large-6 columns first"> <table role="presentation"><tbody><tr><th>Left</th></tr></tbody></table> </th> <th class="small-12 large-6 columns last"> <table role="presentation"><tbody><tr><th>Right</th></tr></tbody></table> </th> </tr></tbody>
</table>

<column>

A grid column inside a <row>. Based on a 12-column grid (configurable).

Attributes:

<!-- Explicit sizing -->
<column sm="12" lg="4">One third</column>
<column sm="12" lg="8">Two thirds</column> <!-- Full width, no expander -->
<column lg="12" no-expander>No expander</column> <!-- Auto-sized (12 / number of siblings) -->
<row> <column>Half</column> <column>Half</column>
</row>

Column Offsets

Push a column to the right by a number of grid columns:

<row> <column lg="8" offset="2">Centered 8-column content</column>
</row>

This adds a large-offset-2 class to the column, shifting it 2 columns from the left.

<wrapper>

Wraps content in a full-width background section. The wrapper expands to the full width of the email client viewport, while content inside remains bounded by the container width. This is the standard pattern for full-width headers, footers, and colored sections.

Attributes: class

<wrapper class="header">Content</wrapper>

Output:

<table role="presentation" class="wrapper header" align="center"> <tbody><tr><td class="wrapper-inner">Content</td></tr></tbody>
</table>

Full-width header/footer pattern

Use a wrapper around a container to get a full-width background with bounded content:

<!-- Full-width dark header -->
<wrapper class="header" style="background-color: #2d2d2d;"> <container> <row> <column lg="6"> <image src="logo.png" alt="Logo" width="150" /> </column> <column lg="6"> <menu align="right"> <item href="/about">About</item> <item href="/contact">Contact</item> </menu> </column> </row> </container>
</wrapper> <!-- Email body -->
<container> <row> <column>Main content here</column> </row>
</container> <!-- Full-width footer -->
<wrapper class="footer" style="background-color: #f3f3f3;"> <container> <row> <column lg="12" align="center"> <p>123 Main St, City, ST 12345</p> <menu align="center"> <item href="/unsubscribe">Unsubscribe</item> <item href="/preferences">Preferences</item> </menu> </column> </row> </container>
</wrapper>

Tip: For older clients that don't support CSS background-color, you can add the bgcolor HTML attribute as a fallback: <wrapper class="header" bgcolor="#2d2d2d">.

<block-grid>

Equal-width item grid.

Attributes:

<block-grid up="3"> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td>
</block-grid>

Output:

<table role="presentation" class="block-grid up-3"> <tbody><tr> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> </tr></tbody>
</table>

Content Components

<button>

A bulletproof email button.

Attributes:

<button href="https://example.com">Click Me</button> <button href="#" size="small" color="alert" expand> Expanded Alert Button
</button>

Output:

<table role="presentation" class="button"> <tbody><tr><td> <table role="presentation"><tbody><tr><td> <a href="https://example.com">Click Me</a> </td></tr></tbody></table> </td></tr></tbody>
</table>

Bulletproof Buttons (Outlook)

Outlook ignores CSS-styled buttons. Add the bulletproof attribute to generate VML <v:roundrect> fallbacks wrapped in MSO conditional comments:

<button href="https://example.com" bulletproof>Get Started</button> <!-- With custom styling -->
<button href="https://example.com" bulletproof bg-color="#e74c3c" text-color="#ffffff" width="250" height="50" radius="8"> Sign Up Now
</button>

Outlook sees the VML button with correct colors and rounded corners. All other email clients see the standard CSS-styled button.

To enable bulletproof buttons for all buttons in your project, add to inky.config.json:

{"bulletproof_buttons": true}

Or use the CLI flag:

inky build --bulletproof-buttons

<spacer>

Vertical whitespace.

Attributes:

<spacer height="16"></spacer>
<spacer sm="10" lg="20"></spacer>

Output (simple):

<table role="presentation" class="spacer"> <tbody><tr><td height="16" style="font-size:16px;line-height:16px;">&nbsp;</td></tr></tbody>
</table>

Output (responsive): generates two tables -- one with hide-for-large and one with show-for-large.

<divider>

A horizontal rule.

Attributes: class

<divider></divider>

Output:

<table role="presentation" class="divider"> <tbody><tr><th>&nbsp;</th></tr></tbody>
</table>

<callout>

A highlighted content box.

Attributes:

<callout color="primary">Important message here.</callout>

Output:

<table role="presentation" class="callout"> <tbody><tr> <th class="callout-inner primary">Important message here.</th> <th class="expander"></th> </tr></tbody>
</table>

<menu> / <item>

Horizontal or vertical navigation menu.

Menu attributes:

Item attributes:

<menu align="center" direction="vertical"> <item href="/about">About</item> <item href="/contact" target="_blank">Contact</item>
</menu>

<image>

Responsive image with proper width handling for email clients.

Attributes:

<image src="hero.jpg" alt="Hero banner" width="600">
<image src="logo.png" alt="Logo" width="400" retina>

The retina flag sets the width attribute to half the source value (e.g., width="400" with retina displays at 200px), so the full-resolution image is shown at half size on retina screens.

<raw>

Prevents Inky from transforming the contents.

<raw> <table><tr><td>This won't be touched by Inky</td></tr></table>
</raw>

The <raw> wrapper is stripped from the output. Most template syntaxes ({{ }}, <%= %>, etc.) are auto-detected and don't need <raw>.

Media Components

<video>

HTML5 video with poster fallback for email clients.

Attributes:

<video src="movie.mp4" poster="poster.jpg" href="https://example.com/watch" width="600" alt="Watch now">

Apple Mail/iOS play the video natively. All other clients show the poster image linked to href.

<hero>

Full-width background image section with VML fallback for Outlook.

Attributes:

<hero background="hero.jpg" width="600" height="400"> <h1>Welcome</h1> <p>Hero section with background image</p>
</hero>

Uses CSS background-image for modern clients and VML v:rect for Outlook.

Social Components

<social> / <social-link>

A row of social media icon links.

<social> attributes:

<social-link> attributes:

<social align="center"> <social-link platform="facebook" href="https://fb.com/mypage">Facebook</social-link> <social-link platform="twitter" href="https://twitter.com/me">Twitter</social-link> <social-link platform="instagram" href="https://ig.com/me" icon="custom-ig.png">IG</social-link>
</social>

If no label text is provided, the platform name is auto-capitalized.

Supported Platforms (19)

Cards and Content Components

<card>

A card with optional image, title, and body.

Attributes:

<card image="photo.jpg" title="Card Title" href="https://example.com"> Card body content goes here.
</card>

Output: a bordered table with separate rows for image, title, and body. The image is wrapped in a link when href is provided.

<alert>

A notification/alert banner.

Attributes:

Default colors by type:

<alert type="success">Operation completed!</alert>
<alert type="warning" color="#fff3cd">Custom color warning</alert>

<badge>

An inline pill/label element.

Attributes:

<badge color="#e74c3c" text-color="#ffffff">New</badge>
<badge>Default</badge>

Output:

<span class="badge" style="display: inline-block; padding: 2px 8px; background-color: #e74c3c; color: #ffffff; border-radius: 12px; font-size: 12px; font-weight: bold; line-height: 1.4;">New</span>

<accordion> / <accordion-item>

Collapsible content sections.

<accordion> attributes: class

<accordion-item> attributes:

<accordion> <accordion-item title="Section 1"> Content for section 1. </accordion-item> <accordion-item title="Section 2"> Content for section 2. </accordion-item>
</accordion>

Each item renders as a table row with a title bar and content area.

<blockquote>

A styled quotation with left border.

Attributes:

<blockquote cite="Jane Doe" color="#3498db"> This is a quoted passage.
</blockquote>

Output:

<table role="presentation" class="blockquote" width="100%" cellpadding="0" cellspacing="0" style="border-left: 4px solid #3498db;"> <tbody> <tr><td style="padding: 0 0 0 16px; font-style: italic;">This is a quoted passage.</td></tr> <tr><td style="padding: 8px 0 0 16px; font-size: 14px; color: #999999;">&mdash; Jane Doe</td></tr> </tbody>
</table>

Conditional Components

<outlook>

Content that only renders in Microsoft Outlook (mso).

<outlook> <table width="600"><tr><td>Outlook-only fallback</td></tr></table>
</outlook>

Output:

<!--[if mso]>
<table width="600"><tr><td>Outlook-only fallback</td></tr></table>
<![endif]-->

<not-outlook>

Content that renders everywhere except Outlook.

<not-outlook> <div style="max-width: 600px;">Modern layout</div>
</not-outlook>

Output:

<!--[if !mso]><!-->
<div style="max-width: 600px;">Modern layout</div>
<!--<![endif]-->

<preview>

Hidden preheader text visible in inbox preview but invisible in the email body.

<preview>Check out our latest sale!</preview>

Output: a hidden <div> with the text, followed by zero-width space padding to prevent body content from leaking into the inbox preview.