Standard components
We offer a variety of standard components to get you started.
- Base
<x-base> - Head
<x-head> - Box
<x-box> - Columns
<x-row>and<x-column> - 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> - Lists
<x-list> - Paragraph
<x-paragraph> - Section
<x-section> - Spacer
<x-spacer>
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.
Message Properties
| Label | Type |
|---|---|
title | string |
preheader | string |
background | string |
color | string |
font-family | string |
font-size | number |
font-weight | stringOne of: 300, 400, 700 |
line-height | number |
text-align | enumOne of: left, center, right |
lang | string |
dir | enumOne of: ltr, rtl, auto |
class | string |
style | string |
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.
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.
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.
Box Properties
| Label | Type |
|---|---|
width | string |
height | string |
padding | string |
margin | string |
align | enumOne of: left, center, right |
background | string |
opacity | number |
border-radius | string |
border-style | enumOne of: none, solid, dashed, dotted |
border-width | string |
border-color | string |
box-shadow | string |
color | string |
font-family | string |
font-size | number |
font-weight | stringOne of: 300, 400, 700 |
line-height | number |
text-align | enumOne of: left, center, right |
lang | string |
dir | enumOne of: ltr, rtl, auto |
label | string |
role | enumOne of: article, region, navigation |
class | string |
style | string |
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.
Columns Properties
| Label | Type |
|---|---|
layout | unknown |
gap | number |
width | string |
padding | string |
margin | string |
align | enumOne of: left, center, right |
background | string |
opacity | number |
border-radius | string |
border-style | enumOne of: none, solid, dashed, dotted |
border-width | string |
border-color | string |
box-shadow | string |
break-point | number |
fallback | enumOne of: single, multi |
color | string |
font-family | string |
font-size | number |
font-weight | stringOne of: 300, 400, 700 |
line-height | number |
text-align | enumOne of: left, center, right |
class | string |
style | string |
Column Properties
| Label | Type |
|---|---|
padding | string |
background | string |
opacity | number |
border-radius | string |
border-style | enumOne of: none, solid, dashed, dotted |
border-width | string |
border-color | string |
box-shadow | string |
class | string |
style | string |
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.
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 | enumOne of: left, center, right |
background-color | string |
opacity | number |
border-radius | string |
border-style | enumOne of: none, solid, dashed, dotted |
border-width | string |
border-color | string |
box-shadow | string |
hover-color | string |
hover-background-color | string |
hover-opacity | number |
hover-box-shadow | string |
hover-border-radius | string |
color | string |
font-size | number |
font-family | string |
font-weight | stringOne of: 300, 400, 700 |
text-align | enumOne of: left, center, right |
line-height | number |
text-transform | stringOne of: none, capitalize, uppercase, lowercase |
text-decoration | stringOne of: none, underline, line-through |
class | string |
style | string |
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>
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 |
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 | stringOne of: 300, 400, 700 |
line-height | number |
text-align | enumOne of: left, center, right |
text-transform | stringOne of: none, capitalize, uppercase, lowercase |
text-decoration | stringOne of: none, underline, line-through |
lang | string |
dir | enumOne 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 | stringOne of: 300, 400, 700 |
line-height | number |
text-align | enumOne of: left, center, right |
text-transform | stringOne of: none, capitalize, uppercase, lowercase |
text-decoration | stringOne of: none, underline, line-through |
lang | string |
dir | enumOne 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 | stringOne of: 300, 400, 700 |
line-height | number |
text-align | enumOne of: left, center, right |
text-transform | stringOne of: none, capitalize, uppercase, lowercase |
text-decoration | stringOne of: none, underline, line-through |
lang | string |
dir | enumOne 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 | stringOne of: 300, 400, 700 |
line-height | number |
text-align | enumOne of: left, center, right |
text-transform | stringOne of: none, capitalize, uppercase, lowercase |
text-decoration | stringOne of: none, underline, line-through |
lang | string |
dir | enumOne 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 | stringOne of: 300, 400, 700 |
line-height | number |
text-align | enumOne of: left, center, right |
text-transform | stringOne of: none, capitalize, uppercase, lowercase |
text-decoration | stringOne of: none, underline, line-through |
lang | string |
dir | enumOne 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 | stringOne of: 300, 400, 700 |
line-height | number |
text-align | enumOne of: left, center, right |
text-transform | stringOne of: none, capitalize, uppercase, lowercase |
text-decoration | stringOne of: none, underline, line-through |
lang | string |
dir | enumOne of: ltr, rtl, auto |
class | string |
style | string |
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 |
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 |
align | enumOne of: left, center, right |
class | string |
style | string |
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 | enumOne of: left, center, right |
opacity | number |
border-radius | string |
border-style | enumOne 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 | stringOne of: 300, 400, 700 |
letter-spacing | number |
line-height | number |
text-align | enumOne of: left, center, right |
text-transform | stringOne of: none, capitalize, uppercase, lowercase |
text-decoration | stringOne of: none, underline, line-through |
class | string |
style | string |
srcset | string |
sizes | string |
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 | stringOne of: ul, ol |
list-style | stringOne 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 | stringOne of: 300, 400, 700 |
line-height | number |
text-align | enumOne of: left, center, right |
text-transform | stringOne of: none, capitalize, uppercase, lowercase |
text-decoration | stringOne of: none, underline, line-through |
class | string |
style | string |
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 | stringOne of: 300, 400, 700 |
line-height | number |
text-align | enumOne of: left, center, right |
text-transform | stringOne of: none, capitalize, uppercase, lowercase |
text-decoration | stringOne of: none, underline, line-through |
lang | string |
dir | enumOne of: ltr, rtl, auto |
class | string |
style | string |
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 |
|---|---|
width | string |
padding | string |
margin | string |
border-radius | string |
align | enumOne of: left, center, right |
outer-background | string |
background | string |
opacity | number |
border-style | enumOne of: none, solid, dashed, dotted |
border-width | string |
border-color | string |
box-shadow | string |
color | string |
font-family | string |
font-size | number |
font-weight | stringOne of: 300, 400, 700 |
line-height | number |
text-align | enumOne of: left, center, right |
lang | string |
dir | enumOne of: ltr, rtl, auto |
label | string |
role | enumOne of: article, region, navigation |
class | string |
style | string |
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 |