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>
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 |
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 |
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 |
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 |
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 |
---|---|
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 |
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 |
---|---|
height | number |
width | string |
align | enum One of: left , center , right |
margin | string |
background-color | string |
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.
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 |
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 |
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 |
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 |
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 |