1

Understand standard vs custom components

Components help you reuse content and structure across your Design Studio 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

Custom components are pieces of messages you can save and reuse—like headers and footers. Creating a custom component saves you time so you don’t have to re-create parts of messages, and helps you maintain consistency across messages.

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.