Standard components

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

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.

Background

To set a background color, gradient, or image, select Message settings then modify the background field in the visual editor. In the code editor, use the CSS property background. Make sure you set a fallback color for email clients that don't support background images or gradients.

<x-base background="linear-gradient(90deg,rgba(255,255,255,0) 0%,rgb(184,19,19) 100%)    rgba(0, 0, 0, 0.5)">

The rgba value at the end of the property is the fallback.

Message Properties

Label	Type
`title`	`string`
`preheader`	`string`
`background`	`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`
`lang`	`string`
`dir`	`enum` One of: `ltr`, `rtl`, `auto`
`class`	`string`
`style`	`string`

Head

The x-head component can be used to pass in any additional content into the <head> of your emails. The most common use for this will be to pass in custom <style> block, but you can also add anything else you may want in the head of an email such as <link>, <meta>, or even add an HTML comment.

You can add as many x-head components as you like and place them anywhere in the code. The content of the x-head component will be passed directly to the head, without any processing so style blocks won't be combined and deduplicated like they are when set in a custom component.

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. Unlike x-section, you only set an outer background color; there is no inner background property.

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.

If you're building an email using both the code and visual editors, add an <x-box> component to the code editor to create an area you can drop components into in the visual editor. This way, you won't have to rebuild the whole email to use components.

Background

You can set a background image, gradient, or solid color. In the visual editor, select the component to view the properties menu. You'll see Box Fill under Styles. Modify this to set background behind the scenes, which covers the full width of the box.

Box Properties

Label	Type
`width`	`string`
`height`	`string`
`padding`	`string`
`margin`	`string`
`align`	`enum` One of: `left`, `center`, `right`
`background`	`string`
`opacity`	`number`
`border-radius`	`string`
`border-style`	`enum` One of: `none`, `solid`, `dashed`, `dotted`
`border-width`	`string`
`border-color`	`string`
`box-shadow`	`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`
`lang`	`string`
`dir`	`enum` One of: `ltr`, `rtl`, `auto`
`label`	`string`
`role`	`enum` One of: `article`, `region`, `navigation`
`class`	`string`
`style`	`string`

Button

A button is a CTA (call to action) which is a key component for driving 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.

Background

You can set a background image, gradient, or solid color. In the visual editor, select the component to view the properties menu. You'll see Fill under Styles. Modify Fill to set a background behind the scenes.

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`
`width`	`string`
`height`	`string`
`padding`	`string`
`margin`	`string`
`align`	`enum` One of: `left`, `center`, `right`
`background`	`string`
`opacity`	`number`
`border-radius`	`string`
`border-style`	`enum` One of: `none`, `solid`, `dashed`, `dotted`
`border-width`	`string`
`border-color`	`string`
`box-shadow`	`string`
`hover-color`	`string`
`hover-background`	`string`
`hover-opacity`	`number`
`hover-box-shadow`	`string`
`hover-border-radius`	`string`
`color`	`string`
`font-size`	`number`
`font-family`	`string`
`font-weight`	`string` One of: `300`, `400`, `700`
`text-align`	`enum` One of: `left`, `center`, `right`
`line-height`	`number`
`text-transform`	`string` One of: `none`, `capitalize`, `uppercase`, `lowercase`
`text-decoration`	`string` One of: `none`, `underline`, `line-through`
`class`	`string`
`style`	`string`

Columns

Use this to add columns to your layouts. We created columns from two component types: an outer x-row component and inner x-column components. The x-row component is a required container without it the x-column components will not work.

We recommend you don't use the x-row component to create a single column layout as that will add unnecessary code. Instead, use the x-box component.

It's important that the number of columns defined in the layout property of the x-row component match the number of x-column components. For instance, if the row's column count is four in the properties menu of the visual editor, then the code needs to reflect four like :layout="[25,25,25,25]. In this case, each column is 25% of the row's width. Click the reset arrow beside the field Columns in the visual editor to reset each column to have an equal width.

The default behavior of columns is to scale down to a narrower layout. If you'd prefer columns to stack on smaller viewports, you can set the break-point property to the size at which you'd like the columns to stack. This isn't supported in all email clients, so we also offer a fallback property. When set to multi, the fallback will behave as the default and stay in a column layout. When set to single, the fallback columns will stack on top of each other.

Background

You can set a background image, gradient, or solid color. In the visual editor, select the component to view the properties menu. Click the plural "Columns" in the breadcrumb at the bottom of the editor for the outermost columns component (x-row). Then set Fill under Styles. Select a column to set the background fill for an individual column (x-column).

Columns Properties

Label	Type
`layout`	`unknown`
`gap`	`number`
`width`	`string`
`padding`	`string`
`margin`	`string`
`align`	`enum` One of: `left`, `center`, `right`
`background`	`string`
`opacity`	`number`
`border-radius`	`string`
`border-style`	`enum` One of: `none`, `solid`, `dashed`, `dotted`
`border-width`	`string`
`border-color`	`string`
`box-shadow`	`string`
`break-point`	`number`
`fallback`	`enum` One of: `single`, `multi`
`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`
`class`	`string`
`style`	`string`

Column Properties

Label	Type
`padding`	`string`
`background`	`string`
`vertical-align`	`enum` One of: `top`, `middle`, `bottom`
`opacity`	`number`
`border-radius`	`string`
`border-style`	`enum` One of: `none`, `solid`, `dashed`, `dotted`
`border-width`	`string`
`border-color`	`string`
`box-shadow`	`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
`margin`	`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`
`lang`	`string`
`dir`	`enum` One of: `ltr`, `rtl`, `auto`
`class`	`string`
`style`	`string`

Heading 2 Properties

Label	Type
`margin`	`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`
`lang`	`string`
`dir`	`enum` One of: `ltr`, `rtl`, `auto`
`class`	`string`
`style`	`string`

Heading 3 Properties

Label	Type
`margin`	`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`
`lang`	`string`
`dir`	`enum` One of: `ltr`, `rtl`, `auto`
`class`	`string`
`style`	`string`

Heading 4 Properties

Label	Type
`margin`	`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`
`lang`	`string`
`dir`	`enum` One of: `ltr`, `rtl`, `auto`
`class`	`string`
`style`	`string`

Heading 5 Properties

Label	Type
`margin`	`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`
`lang`	`string`
`dir`	`enum` One of: `ltr`, `rtl`, `auto`
`class`	`string`
`style`	`string`

Heading 6 Properties

Label	Type
`margin`	`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`
`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
`margin`	`string`
`background-color`	`string`
`height`	`number`
`width`	`string`
`border-radius`	`string`
`align`	`enum` One of: `left`, `center`, `right`
`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. When you choose a file, you can either select from assets you've already uploaded or upload an image that is 3MB or smaller.

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-radius`	`string`
`border-style`	`enum` One of: `none`, `solid`, `dashed`, `dotted`
`border-width`	`string`
`border-color`	`string`
`box-shadow`	`string`
`hover-opacity`	`number`
`hover-box-shadow`	`string`
`hover-border-radius`	`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`
`class`	`string`
`style`	`string`
`srcset`	`string`
`sizes`	`string`

Lists

You can create unordered and ordered lists from the x-list component. You'll set the type of list through the element attribute. Each list item is wrapped in a <li> tag.

List Properties

Label	Type
`element`	`string` One of: `ul`, `ol`
`list-style`	`string` One of: `disc`, `circle`, `square`, `decimal`, `decimal-leading-zero`, `lower-alpha`, `upper-alpha`, `lower-roman`, `upper-roman`, `lower-greek`, `lower-latin`, `upper-latin`, `armenian`, `georgian`, `hebrew`, `hiragana`, `hiragana-iroha`, `katakana`, `katakana-iroha`
`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`
`class`	`string`
`style`	`string`

Paragraph

The x-paragraph component renders a paragraph of text.

Paragraph Properties

Label	Type
`margin`	`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`
`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.

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.

Background

You can set a background image, gradient, or solid color. In the visual editor, select the component to view the properties menu. You'll see Background and Content Fill under Styles. Modify Background to set outer-background behind the scenes, which covers the full width of the section. Modify Content Fill to set an inner background-color based on the width value you specify under Layout.

Section Properties

Label	Type
`width`	`string`
`padding`	`string`
`margin`	`string`
`border-radius`	`string`
`align`	`enum` One of: `left`, `center`, `right`
`outer-background`	`string`
`background`	`string`
`opacity`	`number`
`border-style`	`enum` One of: `none`, `solid`, `dashed`, `dotted`
`border-width`	`string`
`border-color`	`string`
`box-shadow`	`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`
`lang`	`string`
`dir`	`enum` One of: `ltr`, `rtl`, `auto`
`label`	`string`
`role`	`enum` One of: `article`, `region`, `navigation`
`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`
`class`	`string`
`style`	`string`

Previous Article Next Article

Parcel

Workspace

Editors

Visual Editor

Code Editor

Components

Standard components

Custom components

Legacy components

Transformers

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

Message Properties

Head

Box

Box Properties

Button

Hover

Button Properties

Columns

Columns Properties

Column 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

Lists

List Properties

Paragraph

Paragraph Properties

Section

Section Properties

Spacer

Spacer Properties