Utility classes

Utility or helper classes are useful CSS classes that you can add to HubSpot modules, groups or other elements on your template to justify text, hide or show content at various screen sizes, add or remove space, set content width, make round corners, and so many more.

Visibility

Show or hide elements on various screen sizes. For example, if you want to hide an element on desktop but show on small screens, you can use thesse classes:

hidden sm-visible

Or vice versa, if you want to show the element on desktop but hide on small screens, you can use this class:

sm-hidden

Here are all the avilable classes:

CSS Class Description
hidden Hidden by default
visible Visible by default
md-hidden Hidden on screens smaller than 1140px
md-visible Visible on screens smaller than 1140px
sm-hidden Hidden on screens smaller than 768px
sm-visible Visible on screens smaller than 768px
xs-hidden Hidden on screens smaller than 480px
xs-visible Visible on screens smaller than 480px

Alignment

Align text and inline elements (such as buttons, icons) on various screen sizes. For example, if you want to right align text on desktop but center on mobile, you would use:

tr sm-tc

Here are all the available classes:

CSS Class Description
tl Stands for "Text Left". Aligns the text and inline elements to the left
tc Stands for "Text Center". Centers the text and inline elements
tr Stands for "Text Right". Aligns the text and inline elements to the right
tj Stands for "Text Justify". Stretches the text by adding white spaces to make all lines appear equal.
   
md-tl Stands for "Medium Text Left". Aligns the text and inline elements to the left on screens smaller than 1140px
md-tc Stands for "Medium Text Center". Centers the text and inline elements on screens smaller than 1140px
md-tr Stands for "Medium Text Right". Aligns the text and inline elements to the right on screens smaller than 1140px
md-tj Stands for "Text Justify". Stretches the text by adding white spaces to make all lines appear equal on screens smaller than 1140px
   
sm-tl Stands for "Small Text Left". Aligns the text and inline elements to the left on screens smaller than 768px
sm-tc Stands for "Small Text Center". Centers the text and inline elements on screens smaller than 768px
sm-tr Stands for "Small Text Right". Aligns the text and inline elements to the right on screens smaller than 768px
sm-tj Stands for "Text Justify". Stretches the text by adding white spaces to make all lines appear equal on screens smaller than 768px
   
xs-tl Stands for "Extra Small Medium Text Left". Aligns the text and inline elements to the left on screens smaller than 480px
xs-tc Stands for "Extra Small Text Center". Centers the text and inline elements on screens smaller than 480px
xs-tr Stands for "Extra Small Text Right". Aligns the text and inline elements to the right on screens smaller than 480px
xs-tj Stands for "Text Justify". Stretches the text by adding white spaces to make all lines appear equal on screens smaller than 480px

Space

In CSS, the margin property is used to add outer space around elements while padding is used to add space inside elements.

Important notes:

  • Left and right margin should not be used on HubSpot grid layout (modules or groups), except on certain situations (e.g. All Inline child elements) because the additional space around columns will break the layout. For that we recommended padding.

  • Do not use these classes to center content. Use Centered instead.

  • Use large values with caution.

If you want to add 20px margin around an element, you would add this class: m20

m stands for margin and for padding you would use: p20

Sides

To specify the side of the element where the space should be added you can use:

Margin Padding
m Margin p Padding
mtb Margin Top Bottom ptb Padding Top Bottom
mt Margin Top pt Padding Top
mb Margin Bottom pb Padding Bottom
mlr Margin Left Right plr Padding Left Right
ml Margin Left pl Padding Left
mr Margin Right pr Padding Right

For example, you can add 40px margin at the bottom of an element with this class: mb40

You can also add negative top/bottom margin with a class like this nmt100. That means Negative Margin Top 100px. Please use this with caution. All values bellow are supported.

Values

For 30 pixels padding-left, you would add: pl30. Or, for 15 pixels margin-bottom: mb15. Here are all the values you can specify within your class, for either margin or padding:

0 5 10 15 20 30 40 50 60 70 80 90
100 110 120 130 140 150 200 250 300 400 500

Breakpoints

Use breakpoint prefixes to add, change or remove the space values on various screen sizes. For example, md-p10 adds 10px padding on screens smaller than 1140px.

Another example: if you want to add 300px top and bottom padding on large screens, reduce that padding to 200px on medium screens, 100px on small screens and 50px on extra small screens, you would add these classes: ptb300 md-ptb200 sm-ptb100 xs-ptb50.

These are all the breakpoint prefixes you can use with your space classes:

Class prefix Description Example
No prefix for the initial value (desktop) p30
md- Medium screens, smaller than 1140px md-p20
sm- Small screens, smaller than 768px sm-p10
xs- Extra small screens, smaller than 480px xs-p5

Here is a graph for a quick and better view of the space class composition:

Width

Adds a maximum width (CSS max-width) to a module, group or element. Should not be used on divided modules or groups because it will break the HubSpot grid layout:

HubSpot Design Manager Divided vs Undivided

This can also be used with the Centered component to change the default width.

Here are all the available values:

w100 w150 w200 w250 w300 w350 w400 w450 w500 w550 w600 w650 w700
w750 w800 w850 w900 w950 w1000 w1050 w1100 w1150 w1200 w1250 w1300 w1350
w1400 w1450 w1500 w1550 w1600 w1650 w1700 w1750 w1800 w1850 w1900 w1950 w2000

You can also add a breakpoint prefix to specify different values on various screen sizes. For example, if you want a group with a maximum width of 1200px on desktop, but only 400px on mobile, you can add: w1200 sm-w400

These are all the available breakpoints:

Class prefix Description Example
No prefix for the initial value (desktop) w1200
md- Medium screens, smaller than 1140px md-w900
sm- Small screens, smaller than 768px sm-w400
xs- Extra small screens, smaller than 480px xs-w200

Text size

Apply one of the pre-defined classes below to a group or module to increase/reduce text size. This may not work on certain components, where text size is already defined.

Class Description
text-tiny 65.2% of the default font size.
text-small 75% of the default font size.
text-medium 87.5% of the default font size.
text-large 150% of the default font size.

White content

white-content

Act2 White Content Sample

Add this class white-content to the groups or modules where you need white content. For example, on those sections with background images or videos.

Sometimes the best way is to apply this class individually to those modules or groups where you want the content to be white, instead of the entire section, because it may contain elements where white content is not necessary, like Card Boxes, Content Cards, etc.

Act2 Template Builder Rich Text CSS Class

You can apply these classes to the links directly, e.g. <a class="link-theme" href="..., or to the modules or groups containing your links.

Class Description
link-inherit Links are inheriting the color from the text inside the container.
link-theme Applies the theme color to your links.
link-hover-theme Applies the theme color to your links on hover.
link-dark Applies the dark color to your links.
link-hover-dark Applies the dark color to your links on hover.
link-white Makes the links white.
link-hover-white Makes the links white on hover.
link-hover-underline Adds a stylish underline to your links on hover. You can also apply the underline class to a span, link or other inline element to show the same underline. This is white on white-content.

Paragraphs

Apply this class p to an element to add same bottom margin as on your paragraphs.

Apply this class pns to a module or group to remove the spacing between paragraphs. To remember it better, pns comes from Paragraphs No Spacing.

List

Apply this class reset-list to a list, <ul class="reset-list" ... or <ol class="reset-list" ..., to reset the list to browser's default styling.

Blockquotes

Change the color of the default quotes from the <blockquote> element by adding one of the classes below. E.g. <blockqupte class="quote-theme" ...

Class
quote-theme
quote-dark

The quote is automatically white on white-content, so changing the quotes to either theme or dark color may look better in that case.

More amazing utility classes will be documented soon and will appear here!

Using Act2 with the old Design Manager? Read this documentation.