Standard components overview
A selection of accessible, responsive components you can use to create lightweight, flexible code.
We've created our standard components using modern email coding techniques, following the Email Markup Consortium compliant standards, to help you make flexible, lightweight code. These components are maintained and updated regularly to ensure they are compatible with the latest email client quirks and bugs.
Check out our catalog of standard components to get started!
We've designed our components to be as accessible as possible by default. However, we also allow a lot of flexibility which means you should still check your components for accessibility. You can still, for instance, set colors with low contrast, use text that is too small, write alt text that doesn't match an image, or make other accessibility mistakes. We do what we can to make it as easy as possible to create accessible emails, but it is still up to you to make sure you're following best practices. You can test your emails with our accessibility checker.
We've built our components to scale down automatically to fit smaller viewports. Some components like columns also allow additional options such as choosing the breakpoint at which they will stack.
Our components can inherit your styles. In other tools, you may have needed to add things like font-family, line-height and text-align to every element in your email. With our components, you can add these styles to the x-base component, and your whole email will inherit them. You can also add them to a section , box or columns component to apply them to a group of elements.
We've built our components to only include the minimum code required for the desired outcome. Emails built using Parcel components are often around 50% smaller than files built using other frameworks and tools. To reduce file size further, make sure you use inherited styles, too.
We have a large number of properties available for each component, allowing you to create a wide range of designs. But we know there's always something else you might want! So we've given each of our standard components some properties that put more control in your hands.
In the visual and code editors, you can set styles and classes for added flexibility. In the visual editor, click a component to open the right hand properties menu and expand the Advanced dropdown. Specify CSS styles or classes to update your component. In the code editor, you can add a <style> tag inside an <x-head> component to set classes. Then add the class property to your components. Use the style property to add inline styles to the component.
If you need another component that's not available, or you would like additional features on one of our standard components, please let us know! Alternatively, you can create your own custom components and mix and match them with our standard ones.