Description

Utility class helpers to adjust vertical spacing.

These spacing utility classes are for convenience in laying out components within a page in beside or within other components.

Classes prefixed with .u-m are for adding margins, whereas classes prefixed with .u-p are for adding padding.

Directions available for the spacing classes are top and bottom. The vertical shortcut (v) adds padding to the top and bottom - to apply padding between sections.

Note: these are not to be used to adjust the spacing within individual components - as the default margins and padding have already been set, these are designed for use between individual components to add a comfortable amount of spacing.

N.B. for our 2 largest vertical spacing utility classes - u-pv-4x-large and u-pv-5x-large the padding is reduced by 2rem in both directions on smaller screens (480px and below)