5

Understand and style standard components

Standard components come with a predefined set of properties you can modify to customize and brand your messages.

We also offer some standard components behind the scenes to help you structure your email, enhance accessibility, style imported emails, and import Google fonts.

How styling works

Standard components pull from your global styles so you can create a consistent brand across your messages, but you can individually overwrite these styles too.

To style a standard component, click the component on the canvas of the visual editor to open the Properties panel. Component properties are generally broken down into three categories: general, layout, and styles.

• General includes overarching properties like links.
• Layout includes spacing, sizing (margin and padding), and alignment properties.
• Styles includes text styles, colors, borders, and more.

You can choose whether to hide each standard component on desktop or mobile devices. For columns, you decide whether to show or hide the entire column block, not each column within the block.

Style content

Style text, links, and images to look exactly how you want.

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 your message. It’s a link styled to look like a button.

Under Styles in the Properties panel, you can style a button’s default and hover state — what a message recipient sees when they mouse over the button. You can also choose to hide a button on desktop or mobile devices.

In the code editor, a standard button is defined by the <x-cta> tag.

Headings

In the visual editor, when you drag a Heading component onto the canvas, it defaults to Heading 2 (the equivalent of <h2> in HTML). You can switch from Heading 1 to Heading 6 or convert it to a paragraph by clicking the component then selecting a style from the dropdown menu.

In the code editor, headings are defined by <x-heading-#>.

Image

Use the Image component to add media to your message.

In the Properties panel under General, include alt text to make images accessible for screen readers. Modify their appearance under Alt Text Style.

With Image Set, you can provide multiple versions of an image and let email clients choose the best one based on your recipient’s screen size. Learn more about the srcset and sizes properties.

Like with buttons, you can define a separate style when someone hovers over the image and hyperlink the image too.

In the code editor, this component is defined by <x-image>.

Lists

You can create unordered and ordered lists from the Lists component.

You can modify List Type to change between numbered or bulleted items.

In the code editor, lists are defined by <x-list> and <li> tags.

Navigation

Add a menu of buttons that link to your website using the Navigation component.

By default, it includes three buttons for Home, About, and Contact. Click each button to open the properties panel and add your company’s links.

To adjust the number of buttons, click any button, then choose Duplicate or Delete from the pop-up menu.

In the layers panel, all buttons are nested under Navigation. Click either Navigation or an individual Button to open the properties panel. Within the Navigation properties, adjust the horizontal or vertical spacing between the buttons using the Gap setting.

In the code editor, this component is defined by an outer <x-wrap> and inner <x-cta> standard components.

Paragraph

The Paragraph component adds a block of text to your message.

You can change a paragraph component to a heading component in the dropdown above the textbox on the visual editor canvas.

In the code editor, a paragraph is defined by the <x-paragraph> tag.

Social links

Link out to your social media accounts using the Social links component. This is commonly used in email footers.

By default, it includes icons for Facebook, X, Instagram, and LinkedIn. Click each image to open the properties panel and add your company’s links.

To adjust the number of icons, click one then click the duplicate or delete button from the pop-up menu.

In the layers panel, all buttons are nested under Navigation. Click either Navigation or an individual Image to open the properties panel. Within the Navigation properties, adjust the horizontal or vertical spacing between the buttons using the Gap setting.

The default images work well in both dark and light color schemes. If you want to surface different icons based on recipients’ color scheme settings, check out how to code for dark mode.

In the code editor, this component is defined by an outer <x-wrap> and inner <x-image> standard components.

Separate and space out components

Use dividers and spacers to create visual breaks and improve message flow.

Divider

Use a Divider to separate content with a horizontal line.

In the Properties panel, you can adjust the color (Fill), size (Height and Width), border style, radius, and more.

In the code editor, a divider is defined by <x-hr>.

Spacer

We recommend you use margin or padding properties where possible to add space between content. However, if for any reason those properties don’t fulfill your needs, you can use the Spacer component.

The spacer component has a fixed width, dependent on the component it’s nested within. If you dragged a spacer into a section, it would span the width of the section. If you dragged a spacer into a column, it would span only the width of that column.

Adjust the size in the Properties panel to add or subtract vertical space. This does not inherit global styles.

In the code editor, a spacer is defined by <x-spacer>.

Organize and style your message layout

Use Sections, Boxes, and Columns to style multiple components in your message.

• A Box groups related content together with a single background color.
• Columns separate content horizontally, and you can set an outer background color on Columns then inner background colors on each Column.
• A Section spans the full-width of the message and lets you apply both outer and inner background styles for high-level grouping and styling.

Box

Use the Box component to group and style components that should stand out from the rest of your message content, like a footer or an offer. All components inside the box component will inherit its text styles. This is a slightly simplified version of the section component. Unlike section, you only set a background property.

You can set a full-width background image, gradient, or solid color to make the box stand out from other content. Find Box Fill in the Properties panel to get started.

Under Advanced > Accessibility, you can add semantic meaning to your box by adding ARIA landmarks. Screen readers use them to help people navigate your email. You have to set both Role and Label to use them in your email; we ignore them if only one is set.

While these landmarks are intended to improve accessibility, they can easily make accessibility worse if not used properly. Keep the following in mind when using ARIA landmarks in your emails:

• Make sure Label describes the email content in some way so it’s differentiated from other navigation elements that people see when opening the landmarks menu of their screen reader.
• Make sure you set the right Role; for instance, Article isn’t just a news article but rather any standalone bit of content.
• Use them to help readers navigate main sections of your email. Adding too many roles and labels throughout your email can bloat the landmark menu and distract people from the most important parts of your message.

In the code editor, a box is defined by <x-box>.

Columns

Use this to add columns to your layouts. Click a column to style it individually or click Columns under Layers to adjust the number of columns, gap, break point, etc.

You can set a background image, gradient, or solid color to differentiate the outer and/or inner columns from other content. In the visual editor, select the component to view the Properties panel. Click the plural Columns under Layers for the outermost columns component. Then set Fill under Styles. Click a column to set the background fill for an individual column.

We recommend you don’t use Columns to create a single column layout as that will add unnecessary code. Instead, use the Box component.

In the code editor, columns have two component tags: 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. 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 count in the Columns Properties panel 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.

Define if columns scale or stack across screen widths

By default, columns stack on narrower screens but you can adjust their responsiveness in either editor.

• In the visual editor, click Columns under Layers. In the Properties panel, locate Stack Columns. Click Edit. You’ll see the default break point of 600 and the fallback set to stacking. You can change the Break point - the pixel width at which each column should stack on top of each other. And you can change the Stacking fallback to Multi column to prevent stacking. This field is especially imporant for email clients that don’t support a break point.
• 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.

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 base component, 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.

You can set a background image, gradient, or solid color to separate this section from other content. In the visual editor, select the component to view the Properties panel. You’ll see Background and Content Fill under Styles. Modify Background to cover the full width of the section. Modify Content Fill to set an inner color based on the width value you specify under Layout.

Components nested inside <x-section> will inherit the section’s text styles.

Structure your code with standard components

The structure of the body and head of your message is defined by the standard components <x-base> and <x-head>. Any message made using the visual editor automatically has an <x-base> component that you can style by clicking Messages under Layers.

Base

The Base component is the equivalent of a blank page. When you build a message from scratch using the visual editor, we add an <x-base> tag to your code after you drag your first component onto the canvas. Switch to the code editor and you’ll see it wrapping all components in your message.

Each message should only use one base component, and it should be the first component, wrapping all content inside it. This standard component sets the <!doctype html>, <html>, <head> and <body> tags for your message.

The default text styles of your base component inherit your global paragraph styles, but you can overwrite these and modify other properties from the editor. Your message inherits all text styles set on the base component, unless you override the settings on the nested components.

To set a background color, gradient, or image, modify the background property. Make sure you set a fallback color for email clients that don’t support background images or gradients.

Head

In the code editor, add the <x-head> component to pass additional content into the <head> tag of your messages. This is most commonly used to pass in custom <style> blocks, but you can also add <link>, <meta>, or even HTML comments. You can add as many <x-head> components as you need 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 would be in a custom component.

Add context for accessibility

In the code editor, you can add <x-hidden-text> to enhance accessibility. Any text within the component is available to screen readers and text-to-speech tools, but visually hidden in your messages. This allows you to provide additional context for things like link text, without cluttering the visual appearance of your message.

Style HTML like standard components

If you made your email outside of Design Studio, it likely doesn’t use our component language. We’ve made it possible for you to edit and style many HTML tags from the visual editor, but some you’ll have to take an extra step to edit them. For <div>, <span>, and <table> tags, switch to the code editor and wrap the text inside those elements in the standard component:

<div style="font-size: 12px;">
  <x-edit-text> This is a div that you can edit in the visual editor. </x-edit-text>
</div>

Then highlight the text back in the visual editor and you’ll be able to edit basic marks like bold and italics, change the text color, or hyperlink the text.

Import Google fonts

In the code editor, use <x-font-family> to import Google fonts if you aren’t solely using standard components to build your message. 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.

<x-font-family font-family="Roboto, sans-serif"/>
<p style="font-family:Roboto, sans-serif">text</p>