If you’re building custom modules for HubSpot’s drag-and-drop email builder it can be advantageous to know the classes and styling HubSpot uses for the generated layouts. It will let you target the generated content, but more importantly, allow you to utilize responsive styling already in play.
In a system that currently limits our ability to properly style for cross-client compatibility this can solve for some of the issues you may run into and even cut down on some of your coding time.
Note: HubSpot is currently working on a solution for custom coded drag-and-drop email templates. You can keep an eye on updates in this HubSpot Ideas Forum post.
There are several classes used throughout HubSpot’s drag-and-drop email that generates inline styling for the main body, sections, and columns.
The following make up the main wrapper of the email:
Sets the background color (set in Design > Template) around the email.
A wrapper class set on a table to set it to 100% width and height of the parent and remove any email-client set padding and margin.
The class itself doesn’t seem to have any function, but the wrapper has a vertical alignment attribute set to align the content body to the top of the wrapping table.
The following make up the section wrappers (each row of content in the content body):
Adds a 10px left and right padding so that, on mobile, the background color still peeks out around the side of the content body.
Denotes the first section in the email; adding a 20px top padding to allow the main background color to peek out above the content body.
Denotes the last section in the email; adding a 20px bottom padding to allow the main background color to peek out below the content body.
Used for setting the layout settings; including the body width, background color or pattern, and top/bottom padding. By default the background color pulls from the Body color set in Design > Template.
Note: Changing the width of this container and the proceeding columns, across all email-clients, and remaining responsive, would not be possible due to ****drag-and-drop currently not making available the <head> of the email. This is because clients like Gmail strip out any <style> blocks that are not inside the <head>.
The following classes are used on columns within a section:
Turns a <div> into a table-cell on desktop clients and vertically aligns content to the top of the cell.
Sets the size of a column using a 12-grid layout. The following are the available sizes and their equivalent pixel width value:
| hse-size-3 | 150px |
| hse-size-4 | 200px |
| hse-size-5 | 250px |
| hse-size-6 | 300px |
| hse-size-7 | 350px |
| hse-size-8 | 400px |
| hse-size-9 | 450px |
| hse-size-12 | 600px |
The width is set using both max-width and width set as !important so if you want to set a custom width, forgo adding an hse-size to your hse-column.
Is where the module padding is set and enforces a 20px left and right padding on mobile, making the padding uniform across each column when stacked on top of each other.
This is a class used on the div of the Text module, it’s what applies the font colors and line-heights to text, set in Design > Text styles.
Putting it all together, the hierarchy of classes within a HubSpot generated drag-and-drop email looks like the following:
There are a few specific elements that HubSpot generates reset and font styling for.
All <table> tags have some table reset styling applied, specifically dealing with borders and table spacing.
All <td> tags have the Paragraph styling, set in Design > Text styles, applied to them as well as word breaking to avoid text overflowing the cells. Borders are also collapsed and an outlook line-height fix applied.
Important: Colors and line-heights on the paragraph and headings will only be applied if wrapped in an element with the class “hs_cos_wrapper_type_rich_text”.
The markup, with generated inline styles and attributes, will look like this:
You’ll notice that the column itself does not have any inline styles or attributes. The column styling is instead added to the <head> of the email in a <style> block to allow for responsive and client-compatible styling.
Specifically, Outlook.com and Mozilla Thunderbird are set to always show at the specified widths.
All other clients would see the media query that would tell them to only show the specified widths when the window is over 640px wide, otherwise all columns would be shown at 100% width. Below is an example of this styling for the hse-size-5 class:
Now, there is one piece of these emails that will not dynamically generate for any custom code you add. For sections and columns added to the email through HubSpot’s own features, conditional comments are added to provide markup specifically for Outlook.
When writing custom code, if you create any columns, you would need to add this markup to the code yourself to ensure the columns appear correctly on all versions of Outlook.
Important: Tags inside of a conditional comment will not have styling or attributes dynamically generated. You will need to add the necessary widths, padding, resets, etc yourself.
While it doesn’t beat having complete control over the template, knowing how the templates work and being able to utilize already set styling in your custom modules can make coding for drag-and-drop a little easier.