Add standard components

Add standard components to save time coding emails.

You can add one or more standard components to the code editor. Type x- and you'll see a list of available standard components. Choose the one that meets your needs.

In the code editor, an x-base tag is typed. An x-section tag is nested within that. Then an x-heading-2 tag is nested within that. Within the heading tag, the words "Welcome to Parcel!" are typed. An x-paragraph tag is typed below the header. Inside the tag, this sentence is typed, "Check out our docs." Below that, an x-cta tag is added with the words "Learn more." The user clicks the visual editor in the top left dropdown. In the visual editor, the user clicks the learn more button then clicks the pencil icon that appears above the component. A properties menu appears. The user enters in the Link field. Then the user changes the background color of the button from black to blue. The user switches back to the code editor and you see the properties added to the x-cta tag.
Screen recording that shows creating an email from scratch using standard components. The properties menu is coming soon!

Style a standard component

To style a standard component, add attributes directly to the code.