Standard components overview
A selection of accessible, responsive components that you can start using today 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.
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 x-section 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. Use the style property to add inline styles to the component. Use a class property to add a class to the component. You can also use a <style> tag in the code editor, too.
If you find 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.