Structure

Spacing Guidelines

Information

These spacing guidelines are for content authors/creators and developers to follow suit when building out a page with different components. Since there are many different variations, please refer to one of the Spacing Cheatsheets below:

Desktop Cheatsheet: mercer_desktop_spacing_cheatsheet.pdf
Mobile Cheatsheet: mercer_mobile_spacing_cheatsheet.pdf

This Spacing Component are helper classes that can be applied to any other element. They have !important attached to each of the CSS so that it will override any padding/margins that are already applied to the chosen element.

Padding

All Padding

The specific helper classes in this section will apply to all of the element; top, left, right & bottom. The classes for these are shown below:

__mst_padding_xxs: 4px
__mst_padding_xs: 8px
__mst_padding_sm: 16px
__mst_padding_md: 20px
__mst_padding_lg: 32px
__mst_padding_xlg: 52px
__mst_padding_xxl: 84px

Padding Top

The specific helper classes in this section will apply to only the top side of the element. The classes for these are shown below:

__mst_padding_top_xxs: 4px
__mst_padding_top_xs: 8px
__mst_padding_top_sm: 16px
__mst_padding_top_md: 20px
__mst_padding_top_lg: 32px
__mst_padding_top_xlg: 52px
__mst_padding_top_xxl: 84px

Padding Right

The specific helper classes in this section will apply to only the right side of the element. The classes for these are shown below:

__mst_padding_right_xxs: 4px
__mst_padding_right_xs: 8px
__mst_padding_right_sm: 16px
__mst_padding_right_md: 20px
__mst_padding_right_lg: 32px
__mst_padding_right_xlg: 52px
__mst_padding_right_xxl: 84px

Padding Bottom

The specific helper classes in this section will apply to only the bottom side of the element. The classes for these are shown below:

__mst_padding_bottom_xxs: 4px
__mst_padding_bottom_xs: 8px
__mst_padding_bottom_sm: 16px
__mst_padding_bottom_md: 20px
__mst_padding_bottom_lg: 32px
__mst_padding_bottom_xlg: 52px
__mst_padding_bottom_xxl: 84px

Padding Left

The specific helper classes in this section will apply to only the left side of the element. The classes for these are shown below:

__mst_padding_left_xxs: 4px
__mst_padding_left_xs: 8px
__mst_padding_left_sm: 16px
__mst_padding_left_md: 20px
__mst_padding_left_lg: 32px
__mst_padding_left_xlg: 52px
__mst_padding_left_xxl: 84px

Margin

All Margin

The specific helper classes in this section will apply to all of the element; top, left, right & bottom. The classes for these are shown below:

__mst_margin_xxs: 4px
__mst_margin_xs: 8px
__mst_margin_sm: 16px
__mst_margin_md: 20px
__mst_margin_lg: 32px
__mst_margin_xlg: 52px
__mst_margin_xxl: 84px

Margin Top

The specific helper classes in this section will apply to only the top side of the element. The classes for these are shown below:

__mst_margin_top_xxs: 4px
__mst_margin_top_xs: 8px
__mst_margin_top_sm: 16px
__mst_margin_top_md: 20px
__mst_margin_top_lg: 32px
__mst_margin_top_xlg: 52px
__mst_margin_top_xxl: 84px

Margin Right

The specific helper classes in this section will apply to only the right side of the element. The classes for these are shown below:

__mst_margin_right_xxs: 4px
__mst_margin_right_xs: 8px
__mst_margin_right_sm: 16px
__mst_margin_right_md: 20px
__mst_margin_right_lg: 32px
__mst_margin_right_xlg: 52px
__mst_margin_right_xxl: 84px

Margin Bottom

The specific helper classes in this section will apply to only the bottom side of the element. The classes for these are shown below:

__mst_margin_bottom_xxs: 4px
__mst_margin_bottom_xs: 8px
__mst_margin_bottom_sm: 16px
__mst_margin_bottom_md: 20px
__mst_margin_bottom_lg: 32px
__mst_margin_bottom_xlg: 52px
__mst_margin_bottom_xxl: 84px

Margin Left

The specific helper classes in this section will apply to only the left side of the element. The classes for these are shown below:

__mst_margin_left_xxs: 4px
__mst_margin_left_xs: 8px
__mst_margin_left_sm: 16px
__mst_margin_left_md: 20px
__mst_margin_left_lg: 32px
__mst_margin_left_xlg: 52px
__mst_margin_left_xxl: 84px