1

Understand standard vs custom components

Components help you reuse structure and content across your messages so you can build faster.

In Design Studio, you can use our out-of-the-box Standard Components and create your own Custom Components.

Standard components

Standard components are pre-built blocks that help you build beautiful, engaging messages as quickly as possible. They are the backbone of Design Studio messages — headings, paragraphs, buttons, sections, and more. You’ll see a list of available standard components in the insert menu of the visual editor. Once you’ve dragged a component onto the canvas, you can style it by adjusting the component’s properties.

Our standard components are:

• Accessible: use our accessibility checker to ensure you’re following best practices.
• Responsive: they scale down automatically to fit smaller viewports, but you can also change this for some standard components like columns.
• Able to inherit your styles: for instance, if you nest multiple paragraph components within a box component, the paragraphs would inherit the text styles of the box.
• Lightweight: to reduce code bloat.
• Flexible: you can modify standard properties or add your own under Advanced in the Properties menu.

We created our standard components following the Email Markup Consortium compliant standards to help you make flexible, lightweight code. We maintain and update these components to ensure they’re compatible with the latest email client quirks and bugs.

Custom components

Create reusable structure and content across your messages using custom components. Need a consistent header across all messages? Build it once as a custom component and insert it wherever you need it. Custom components give your team full control over design and functionality while speeding up message design and creation.

Custom components help you:

• Build efficiently: create a reusable block once then easily find it to reuse across future messages.
• Cascade changes from one source of truth: update your component file so changes cascade to all messages using it.
• Streamline team collaboration: Developers can create reusable code in JavaScript, HTML, and CSS, and marketers can drag them into the visual editor with no coding required.
• Create reusable, interactive features: Interactive messages are time consuming to make, but with custom components you can make an interactive feature (like a survey) once, and reuse it as many times as you see fit.