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
   
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
   
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
   
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

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

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

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

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