Standard components
Add standard components to save time coding emails.
You can add standard components to your email through the code or visual editor. In the visual editor, you can drag standard components from the Insert menu onto your email then click them to open the properties menu and modify their settings. In the code editor, you can use additional standard components like <x-edit-text> and <x-font-family> to help you transition emails, made in or outside of Parcel, to our latest components.
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 base component. Each email should only use one 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.
When you build an email from scratch using the visual editor, after you drag your first component onto the canvas, we add an <x-base> tag to your code. Switch to the code editor and you'll see it wrapping all components in your message. To style a base component, click Message Settings in the toolbar.
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 | 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 |
Use the <x-head> component to pass additional content into the <head> tag of your emails. The most common use is for passing in custom <style> blocks, but you can also add <link>, <meta>, or even an HTML comment. You can add as many <x-head> components as you like and place them anywhere in your code. We pass the content of the <x-head> component 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 <x-edit-text> 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>
Use <x-font-family> to import Google fonts if you aren't solely using standard components to build your email. Include this in any custom component that would allow the user to set a font family. It will look over a font stack then, if any of the fonts included are Google fonts, it will import them into the template.
Example:
<x-font-family font-family="Roboto, sans-serif"/>
<p style="font-family:Roboto, sans-serif">text</p>
For standard components, you only need to set the font-family property:
Example:
<x-paragraph font-family="Roboto, sans-serif">text</x-paragraph>
X Font Family Properties
| Label | Type |
|---|---|
font-family | 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.
Use the box component to group and style components that should stand out from the rest of the content, like a footer or an offer. All components inside the box component will inherit its text styles. You can also use 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.
This is a slightly simplified version of the section component. Unlike section, you only set an outer background color; there is no inner background property.
In the visual editor, you can drag a Box onto your canvas then drag other components into it. Click the box on the canvas to view the properties menu and adjust settings.
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 | 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 |
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. It's a link styled to look like a button.
In the code editor, a button uses the <x-cta> tag. In the visual editor, you can drag a Button onto your canvas then click the button to view the properties menu and adjust settings.
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 different state to your button when someone hovers over it. This can encourage people to click through to the landing page. In the visual editor, click the button to open the properties menu, scroll to Hover Effect, then click + to set the styles. In the code editor, use the properties outlined in the table below that start with hover.
Button Properties
| Label | Type |
|---|---|
href | string |
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 |
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 | 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 to add columns to your layouts.
In the visual editor, drag a Columns component onto your canvas. Drag other components into each column to start creating. Click a column to open the properties menu and adjust settings or click the columns breadcrumb at the bottom of the editor to open layout settings (number of columns, gap/breakpoint, etc.).
In the code editor, columns have two component tags: an outer x-row component and an inner x-column components. The x-row component is a required container; without it, the x-column components will not work. 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, in the visual editor, if the columns count in the Columns properties menu is four, then the layout property of x-row must reflect four like :layout="[25,25,25,25]. In this case, each column is 25% of the row's width.
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.
Responsiveness
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 adjust the break point and set a stacking fallback.
In the visual editor, click the columns breadcrumb at the bottom of the editor to open the properties menu then scroll down to Responsive. Set the Break point - the pixel width at which each column should stack on top of each other. Then set a Stacking fallback. For email clients that don't support a break point, decide whether columns should fallback to stacking or remain as multiple columns.
In the code editor, you can add a break-point property as well as a fallback property for email clients that don't support break points. When you set fallback to multi, the columns will stay in a column layout. When set to single, the 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 | 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 |
vertical-align | enumOne of: top, middle, bottom |
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 |
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.
In the visual editor, drag a Divider component onto your email. Click it to open the properties menu and style it as you see fit.
Divider Properties
| Label | Type |
|---|---|
margin | string |
background-color | string |
height | number |
width | string |
border-radius | string |
align | enumOne of: left, center, right |
class | string |
style | string |
There are six heading components, x-heading-1 to x-heading-6, representing the six levels of HTML headings h1 to h6.
In the visual editor, when you drag a Heading component onto your email, it defaults to heading 2. Click the component then select from the dropdown menu to change it.
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 |
The <x-image> component lets you add 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. In the visual editor, drag an Image component onto your email then click Choose to either select a file 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.
In the code editor, you'll set the type of list through the element attribute. Each list item is wrapped in <li>. In the visual editor, drag a List onto your email then click it to open the properties menu. Here you'll modify List Type to change between ordered or unordered.
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.
In the visual editor, drag a Paragraph onto your email then click it to open the properties menu and modify its settings. You can also change a paragraph component to a heading component in the dropdown above the textbox.
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.
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 nested inside <x-section> 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 | 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. It allows for either vertical or horizontal spacing. You can add one through the visual or code editors.
Spacer Properties
| Label | Type |
|---|---|
size | number |
class | string |
style | string |