Standard components

We offer a variety of standard components to get you started.

Base <x-base>
Box <x-box>
CTA (call to action) <x-cta>
Edit text in visual editor <x-edit-text>
Font-family <x-font-family>
Headings
- <x-heading-1>
- <x-heading-2>
- <x-heading-3>
- <x-heading-4>
- <x-heading-5>
- <x-heading-6>
Hidden text <x-hidden-text>
Horizontal rule <x-hr>
Image <x-image>
Paragraph <x-paragraph>
Section <x-section>
Spacer <x-spacer>
Video <x-video>

Base

The x-base component is the equivalent of a blank page. Apply any basic settings, like fonts and colors, for the message here. Your message will inherit all text styles set on the x-base component. You should only ever use one x-base component per message, and it should be the first component, wrapping all other components inside it.

Behind the scenes, this sets the <!doctype html>, <html>, <head> and <body> tags.

Base Properties

Label	Type
`title`	`string`
`colorScheme`	`enum` One of: `normal`, `light`, `dark`, `light dark`, `dark light`, `only light`, `only dark`, `only light dark`, `only dark light`
`preheader`	`string`
`lang`	`string`
`dir`	`enum` One of: `ltr`, `rtl`, `auto`
`color`	`string`
`font-family`	`string`
`font-size`	`number`
`font-weight`	`string` One of: `300`, `400`, `700`
`line-height`	`number`
`text-align`	`enum` One of: `left`, `center`, `right`
`background-color`	`string`
`style`	`string`
`class`	`string`

Box

Use the <x-box> component to group and style components that should, for instance, stand out from the rest of the content, like a footer or an offer. This is a slightly simplified version of the x-section component. All components inside the x-box component will inherit its text styles.

You can also use x-box to add semantic meaning to a group of components by using the role and label settings. Adding accessibility in this way is an advanced feature; only use this if you understand the impact as this can be negative when used incorrectly.

Box Properties

Label	Type
`color`	`string`
`font-family`	`string`
`font-size`	`number`
`font-weight`	`string` One of: `300`, `400`, `700`
`line-height`	`number`
`text-align`	`enum` One of: `left`, `center`, `right`
`width`	`string`
`height`	`string`
`padding`	`string`
`margin`	`string`
`align`	`enum` One of: `left`, `center`, `right`
`opacity`	`number`
`background-color`	`string`
`outer-background-color`	`string`
`border-style`	`enum` One of: `none`, `solid`, `dashed`, `dotted`
`border-width`	`string`
`border-color`	`string`
`border-radius`	`string`
`box-shadow`	`string`
`role`	`enum` One of: `article`, `region`, `navigation`
`lang`	`string`
`dir`	`enum` One of: `ltr`, `rtl`, `auto`
`label`	`string`
`class`	`string`
`style`	`string`

CTA

A CTA (call to action) is a key component used to drive users to click through to the main landing page of an email. Often referred to as a button, the x-cta component is actually a link that's styled to look like a button.

Hover

You can add a hover state to your CTA component to set a different style when someone hovers over your link. This can encourage people to click through to the landing page.

Button Properties

Label	Type
`href`	`string`
`color`	`string`
`font-family`	`string`
`font-size`	`number`
`font-weight`	`string` One of: `300`, `400`, `700`
`line-height`	`number`
`text-align`	`enum` One of: `left`, `center`, `right`
`text-transform`	`string` One of: `none`, `capitalize`, `uppercase`, `lowercase`
`text-decoration`	`string` One of: `none`, `underline`, `line-through`
`opacity`	`number`
`background-color`	`string`
`border-style`	`enum` One of: `none`, `solid`, `dashed`, `dotted`
`border-width`	`string`
`border-color`	`string`
`border-radius`	`string`
`box-shadow`	`string`
`full-width`	`boolean`
`width`	`string`
`height`	`string`
`padding`	`string`
`margin`	`string`
`align`	`enum` One of: `left`, `center`, `right`
`hover-color`	`string`
`hover-background-color`	`string`
`hover-opacity`	`number`
`hover-box-shadow`	`string`
`hover-border-radius`	`string`
`class`	`string`
`style`	`string`

Edit text

Use this tag in conjunction with the visual editor. Right now, not all tags can be edited from the visual editor. If you wrap this standard component around text in the code editor, then it will be modifiable in the visual editor.

Example:

<div style="font-size: 12px;">
  <x-edit-text> This is a div that you can edit. </x-edit-text>
</div>

Font family

The <x-font-family> component lets you import Google fonts. It will look over a font stack then, if any of the fonts included are Google fonts, it will import them into the template. Include this in any custom component that would allow the user to set a font family.

X Font Family Properties

Label	Type
`font-family`	`string`

Headings

There are six heading components, x-heading-1 to x-heading-6, representing the six levels of HTML headings h1 to h6.

Heading 1 Properties

Label	Type
`color`	`string`
`font-family`	`string`
`font-size`	`number`
`font-weight`	`string` One of: `300`, `400`, `700`
`line-height`	`number`
`text-align`	`enum` One of: `left`, `center`, `right`
`text-transform`	`string` One of: `none`, `capitalize`, `uppercase`, `lowercase`
`text-decoration`	`string` One of: `none`, `underline`, `line-through`
`margin`	`string`
`lang`	`string`
`dir`	`enum` One of: `ltr`, `rtl`, `auto`
`class`	`string`
`style`	`string`

Heading 2 Properties

Label	Type
`color`	`string`
`font-family`	`string`
`font-size`	`number`
`font-weight`	`string` One of: `300`, `400`, `700`
`line-height`	`number`
`text-align`	`enum` One of: `left`, `center`, `right`
`text-transform`	`string` One of: `none`, `capitalize`, `uppercase`, `lowercase`
`text-decoration`	`string` One of: `none`, `underline`, `line-through`
`margin`	`string`
`lang`	`string`
`dir`	`enum` One of: `ltr`, `rtl`, `auto`
`class`	`string`
`style`	`string`

Heading 3 Properties

Label	Type
`color`	`string`
`font-family`	`string`
`font-size`	`number`
`font-weight`	`string` One of: `300`, `400`, `700`
`line-height`	`number`
`text-align`	`enum` One of: `left`, `center`, `right`
`text-transform`	`string` One of: `none`, `capitalize`, `uppercase`, `lowercase`
`text-decoration`	`string` One of: `none`, `underline`, `line-through`
`margin`	`string`
`lang`	`string`
`dir`	`enum` One of: `ltr`, `rtl`, `auto`
`class`	`string`
`style`	`string`

Heading 4 Properties

Label	Type
`color`	`string`
`font-family`	`string`
`font-size`	`number`
`font-weight`	`string` One of: `300`, `400`, `700`
`line-height`	`number`
`text-align`	`enum` One of: `left`, `center`, `right`
`text-transform`	`string` One of: `none`, `capitalize`, `uppercase`, `lowercase`
`text-decoration`	`string` One of: `none`, `underline`, `line-through`
`margin`	`string`
`lang`	`string`
`dir`	`enum` One of: `ltr`, `rtl`, `auto`
`class`	`string`
`style`	`string`

Heading 5 Properties

Label	Type
`color`	`string`
`font-family`	`string`
`font-size`	`number`
`font-weight`	`string` One of: `300`, `400`, `700`
`line-height`	`number`
`text-align`	`enum` One of: `left`, `center`, `right`
`text-transform`	`string` One of: `none`, `capitalize`, `uppercase`, `lowercase`
`text-decoration`	`string` One of: `none`, `underline`, `line-through`
`margin`	`string`
`lang`	`string`
`dir`	`enum` One of: `ltr`, `rtl`, `auto`
`class`	`string`
`style`	`string`

Heading 6 Properties

Label	Type
`color`	`string`
`font-family`	`string`
`font-size`	`number`
`font-weight`	`string` One of: `300`, `400`, `700`
`line-height`	`number`
`text-align`	`enum` One of: `left`, `center`, `right`
`text-transform`	`string` One of: `none`, `capitalize`, `uppercase`, `lowercase`
`text-decoration`	`string` One of: `none`, `underline`, `line-through`
`margin`	`string`
`lang`	`string`
`dir`	`enum` One of: `ltr`, `rtl`, `auto`
`class`	`string`
`style`	`string`

Hidden Text

You can use <x-hidden-text> to enhance accessibility. The text will be available to screen readers and text-to-speech tools, but visually hidden in your emails. This allows you to provide additional context for things like link text, without cluttering the visual appearance.

Properties

Failed to load properties

Horizontal rule

Use the x-hr component to separate content with a horizontal rule. It creates a simple line that can visually break up sections of a page.

Divider Properties

Label	Type
`height`	`number`
`width`	`string`
`align`	`enum` One of: `left`, `center`, `right`
`margin`	`string`
`background-color`	`string`
`class`	`string`
`style`	`string`

Image

The x-image component adds an image to your message. For best performance, you should use .jpg, .png or .gif file types. Some email clients don't fully support more modern formats.

For more advanced image options, we support srcset and sizes properties. With these, you can provide multiple versions of the image and let the email client choose the best one based on the screen size.

Image Properties

Label	Type
`src`	`string`
`href`	`string`
`alt`	`string`
`width`	`string`
`margin`	`string`
`align`	`enum` One of: `left`, `center`, `right`
`opacity`	`number`
`border-style`	`enum` One of: `none`, `solid`, `dashed`, `dotted`
`border-width`	`string`
`border-color`	`string`
`border-radius`	`string`
`box-shadow`	`string`
`background-color`	`string`
`color`	`string`
`font-family`	`string`
`font-size`	`number`
`font-weight`	`string` One of: `300`, `400`, `700`
`letter-spacing`	`number`
`line-height`	`number`
`text-align`	`enum` One of: `left`, `center`, `right`
`text-transform`	`string` One of: `none`, `capitalize`, `uppercase`, `lowercase`
`text-decoration`	`string` One of: `none`, `underline`, `line-through`
`hover-opacity`	`number`
`hover-box-shadow`	`string`
`hover-border-radius`	`string`
`class`	`string`
`style`	`string`
`srcset`	`string`
`sizes`	`string`

Paragraph

The x-paragraph component renders a paragraph of text.

Paragraph Properties

Label	Type
`color`	`string`
`font-family`	`string`
`font-size`	`number`
`font-weight`	`string` One of: `300`, `400`, `700`
`line-height`	`number`
`text-align`	`enum` One of: `left`, `center`, `right`
`text-transform`	`string` One of: `none`, `capitalize`, `uppercase`, `lowercase`
`text-decoration`	`string` One of: `none`, `underline`, `line-through`
`margin`	`string`
`lang`	`string`
`dir`	`enum` One of: `ltr`, `rtl`, `auto`
`class`	`string`
`style`	`string`

Section

This component adds a full-width section you can use to separate content on a page. You can set an outer-background-color and an inner background-color. The outer will always fill the full width while the inner can take a width value.

This is commonly used as a top-level component, inside the x-base, to create a central column of content in the message. You can create multiple sections and apply different backgrounds to each for better visual separation.

Components inside the x-section component will inherit the section's text styles.

Section Properties

Label	Type
`is-start-section`	`boolean`
`color`	`string`
`font-family`	`string`
`font-size`	`number`
`font-weight`	`string` One of: `300`, `400`, `700`
`line-height`	`number`
`text-align`	`enum` One of: `left`, `center`, `right`
`width`	`string`
`padding`	`string`
`margin`	`string`
`align`	`enum` One of: `left`, `center`, `right`
`opacity`	`number`
`outer-background-color`	`string`
`background-color`	`string`
`border-style`	`enum` One of: `none`, `solid`, `dashed`, `dotted`
`border-width`	`string`
`border-color`	`string`
`border-radius`	`string`
`box-shadow`	`string`
`role`	`enum` One of: `article`, `region`, `navigation`
`lang`	`string`
`dir`	`enum` One of: `ltr`, `rtl`, `auto`
`label`	`string`
`class`	`string`
`style`	`string`

Spacer

We recommend you use margin or padding properties where possible to add space between elements. However, if for any reason those properties don't fulfill your needs, you can use the x-spacer component. The x-spacer component allows for either vertical or horizontal spacing.

Spacer Properties

Label	Type
`size`	`number`
`direction`	`enum` One of: `vertical`, `horizontal`
`class`	`string`
`style`	`string`

Video

The x-video component will pull an image from the video to create a thumbnail. It will display a play button and link out to the video in a new tab. It is compatible with YouTube, Vimeo, Wistia, and Loom videos. This is an extension of the x-image component.

Properties

Failed to load properties

Previous Article Next Article

Parcel

Workspace

Code Editor

Visual Editor

Transformers

Components

Standard components

Custom components

Legacy components

Command Palette

Preview

Developer Tools

Sharing

Feedback

Analytics & Tracking

Teams

Account

Standard components

We offer a variety of standard components to get you started.

Base

Base Properties

Box

Box Properties

CTA

Hover

Button Properties

Edit text

Font family

X Font Family Properties

Headings

Heading 1 Properties

Heading 2 Properties

Heading 3 Properties

Heading 4 Properties

Heading 5 Properties

Heading 6 Properties

Hidden Text

Properties

Horizontal rule

Divider Properties

Image

Image Properties

Paragraph

Paragraph Properties

Section

Section Properties

Spacer

Spacer Properties

Video

Properties