Standard components
We offer a variety of standard components to get you started.
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 |
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. 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 |
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.
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 |
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 |
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 | 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 |
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 |
border-radius | string |
align | enum One 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 | 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 |
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 |
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 |
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 |
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 |