Hudl Design System

Last Modified:October 26, 2016

Space

The uni-margin-- and uni-pad-- are handy classes you can add to html elements to add margin or padding to a given element.

# Margin

Add these classes to your markup to add margin (external space) to elements. Alternately, you can use space variables or the space variables in addition to the space mixin, as you author you own CSS.

All (top, right, bottom, left)

Class name Rem value Pixel value Associated variable
.uni-margin--eighth 0.125rem 2px $space-eighth
.uni-margin--quarter 0.25rem 4px $space-quarter
.uni-margin--half 0.5rem 8px $space-half
.uni-margin--one 1rem 16px $space-one
.uni-margin--one-and-half 1.5rem 24px $space-one-and-half
.uni-margin--two 2rem 32px $space-two
.uni-margin--three 3rem 48px $space-three
.uni-margin--four 4rem 64px $space-four

Vertical (top and bottom)

Class name Rem value Pixel value Associated variable
.uni-margin--eighth--vert 0.125rem 2px $space-eighth
.uni-margin--quarter--vert 0.25rem 4px $space-quarter
.uni-margin--half--vert 0.5rem 8px $space-half
.uni-margin--one--vert 1rem 16px $space-one
.uni-margin--one-and-half--vert 1.5rem 24px $space-one-and-half
.uni-margin--two--vert 2rem 32px $space-two
.uni-margin--three--vert 3rem 48px $space-three
.uni-margin--four--vert 4rem 64px $space-four

Top

Class name Rem value Pixel value Associated variable
.uni-margin--eighth--top 0.125rem 2px $space-eighth
.uni-margin--quarter--top 0.25rem 4px $space-quarter
.uni-margin--half--top 0.5rem 8px $space-half
.uni-margin--one--top 1rem 16px $space-one
.uni-margin--one-and-half--top 1.5rem 24px $space-one-and-half
.uni-margin--two--top 2rem 32px $space-two
.uni-margin--three--top 3rem 48px $space-three
.uni-margin--four--top 4rem 64px $space-four

Bottom

Class name Rem value Pixel value Associated variable
.uni-margin--eighth--btm 0.125rem 2px $space-eighth
.uni-margin--quarter--btm 0.25rem 4px $space-quarter
.uni-margin--half--btm 0.5rem 8px $space-half
.uni-margin--one--btm 1rem 16px $space-one
.uni-margin--one-and-half--btm 1.5rem 24px $space-one-and-half
.uni-margin--two--btm 2rem 32px $space-two
.uni-margin--three--btm 3rem 48px $space-three
.uni-margin--four--btm 4rem 64px $space-four

Horizontal (right and left)

Class name Rem value Pixel value Associated variable
.uni-margin--eighth--horiz 0.125rem 2px $space-eighth
.uni-margin--quarter--horiz 0.25rem 4px $space-quarter
.uni-margin--half--horiz 0.5rem 8px $space-half
.uni-margin--one--horiz 1rem 16px $space-one
.uni-margin--one-and-half--horiz 1.5rem 24px $space-one-and-half
.uni-margin--two--horiz 2rem 32px $space-two
.uni-margin--three--horiz 3rem 48px $space-three
.uni-margin--four--horiz 4rem 64px $space-four

Right

Class name Rem value Pixel value Associated variable
.uni-margin--eighth--right 0.125rem 2px $space-eighth
.uni-margin--quarter--right 0.25rem 4px $space-quarter
.uni-margin--half--right 0.5rem 8px $space-half
.uni-margin--one--right 1rem 16px $space-one
.uni-margin--one-and-half--right 1.5rem 24px $space-one-and-half
.uni-margin--two--right 2rem 32px $space-two
.uni-margin--three--right 3rem 48px $space-three
.uni-margin--four--right 4rem 64px $space-four

Left

Class name Rem value Pixel value Associated variable
.uni-margin--eighth--left 0.125rem 2px $space-eighth
.uni-margin--quarter--left 0.25rem 4px $space-quarter
.uni-margin--half--left 0.5rem 8px $space-half
.uni-margin--one--left 1rem 16px $space-one
.uni-margin--one-and-half--left 1.5rem 24px $space-one-and-half
.uni-margin--two--left 2rem 32px $space-two
.uni-margin--three--left 3rem 48px $space-three
.uni-margin--four--left 4rem 64px $space-four

# Padding

Add these classes to your markup to add padding (internal space) to elements. Alternately, you can use space variables or the space variables in addition to the space mixin, as you author you own CSS.

All (top, right, bottom, left)

Class name Rem value Pixel value Associated variable
.uni-pad--eighth 0.125rem 2px $space-eighth
.uni-pad--quarter 0.25rem 4px $space-quarter
.uni-pad--half 0.5rem 8px $space-half
.uni-pad--one 1rem 16px $space-one
.uni-pad--one-and-half 1.5rem 24px $space-one-and-half
.uni-pad--two 2rem 32px $space-two
.uni-pad--three 3rem 48px $space-three
.uni-pad--four 4rem 64px $space-four

Vertical (top and bottom)

Class name Rem value Pixel value Associated variable
.uni-pad--eighth--vert 0.125rem 2px $space-eighth
.uni-pad--quarter--vert 0.25rem 4px $space-quarter
.uni-pad--half--vert 0.5rem 8px $space-half
.uni-pad--one--vert 1rem 16px $space-one
.uni-pad--one-and-half--vert 1.5rem 24px $space-one-and-half
.uni-pad--two--vert 2rem 32px $space-two
.uni-pad--three--vert 3rem 48px $space-three
.uni-pad--four--vert 4rem 64px $space-four

Top

Class name Rem value Pixel value Associated variable
.uni-pad--eighth--top 0.125rem 2px $space-eighth
.uni-pad--quarter--top 0.25rem 4px $space-quarter
.uni-pad--half--top 0.5rem 8px $space-half
.uni-pad--one--top 1rem 16px $space-one
.uni-pad--one-and-half--top 1.5rem 24px $space-one-and-half
.uni-pad--two--top 2rem 32px $space-two
.uni-pad--three--top 3rem 48px $space-three
.uni-pad--four--top 4rem 64px $space-four

Bottom

Class name Rem value Pixel value Associated variable
.uni-pad--eighth--btm 0.125rem 2px $space-eighth
.uni-pad--quarter--btm 0.25rem 4px $space-quarter
.uni-pad--half--btm 0.5rem 8px $space-half
.uni-pad--one--btm 1rem 16px $space-one
.uni-pad--one-and-half--btm 1.5rem 24px $space-one-and-half
.uni-pad--two--btm 2rem 32px $space-two
.uni-pad--three--btm 3rem 48px $space-three
.uni-pad--four--btm 4rem 64px $space-four

Horizontal (right and left)

Class name Rem value Pixel value Associated variable
.uni-pad--eighth--horiz 0.125rem 2px $space-eighth
.uni-pad--quarter--horiz 0.25rem 4px $space-quarter
.uni-pad--half--horiz 0.5rem 8px $space-half
.uni-pad--one--horiz 1rem 16px $space-one
.uni-pad--one-and-half--horiz 1.5rem 24px $space-one-and-half
.uni-pad--two--horiz 2rem 32px $space-two
.uni-pad--three--horiz 3rem 48px $space-three
.uni-pad--four--horiz 4rem 64px $space-four

Right

Class name Rem value Pixel value Associated variable
.uni-pad--eighth--right 0.125rem 2px $space-eighth
.uni-pad--quarter--right 0.25rem 4px $space-quarter
.uni-pad--half--right 0.5rem 8px $space-half
.uni-pad--one--right 1rem 16px $space-one
.uni-pad--one-and-half--right 1.5rem 24px $space-one-and-half
.uni-pad--two--right 2rem 32px $space-two
.uni-pad--three--right 3rem 48px $space-three
.uni-pad--four--right 4rem 64px $space-four

Left

Class name Rem value Pixel value Associated variable
.uni-pad--eighth--left 0.125rem 2px $space-eighth
.uni-pad--quarter--left 0.25rem 4px $space-quarter
.uni-pad--half--left 0.5rem 8px $space-half
.uni-pad--one--left 1rem 16px $space-one
.uni-pad--one-and-half--left 1.5rem 24px $space-one-and-half
.uni-pad--two--left 2rem 32px $space-two
.uni-pad--three--left 3rem 48px $space-three
.uni-pad--four--left 4rem 64px $space-four

# Legacy Margin

These legacy margin classes are deprecated. Instead use the uniform informed space classes for margin.

All (top, right, bottom, left)

Class name Rem value Pixel value Associated variable
.uni-spacer--xxsmall 0.25rem 4px $spacer-xxsmall
.uni-spacer--xsmall 0.5rem 8px $spacer-xsmall
.uni-spacer--small 0.75rem 12px $spacer-small
.uni-spacer--medium 1rem 16px $spacer-medium
.uni-spacer--large 1.5rem 24px $spacer-large
.uni-spacer--xlarge 2rem 32px $spacer-xlarge
.uni-spacer--xxlarge 3rem 48px $spacer-xxlarge

Vertical (top and bottom)

Class name Rem value Pixel value Associated variable
.uni-spacer--xxsmall--vert 0.25rem 4px $spacer-xxsmall
.uni-spacer--xsmall--vert 0.5rem 8px $spacer-xsmall
.uni-spacer--small--vert 0.75rem 12px $spacer-small
.uni-spacer--medium--vert 1rem 16px $spacer-medium
.uni-spacer--large--vert 1.5rem 24px $spacer-large
.uni-spacer--xlarge--vert 2rem 32px $spacer-xlarge
.uni-spacer--xxlarge--vert 3rem 48px $spacer-xxlarge

Top

Class name Rem value Pixel value Associated variable
.uni-spacer--xxsmall--top 0.25rem 4px $spacer-xxsmall
.uni-spacer--xsmall--top 0.5rem 8px $spacer-xsmall
.uni-spacer--small--top 0.75rem 12px $spacer-small
.uni-spacer--medium--top 1rem 16px $spacer-medium
.uni-spacer--large--top 1.5rem 24px $spacer-large
.uni-spacer--xlarge--top 2rem 32px $spacer-xlarge
.uni-spacer--xxlarge--top 3rem 48px $spacer-xxlarge

Bottom

Class name Rem value Pixel value Associated variable
.uni-spacer--xxsmall--btm 0.25rem 4px $spacer-xxsmall
.uni-spacer--xsmall--btm 0.5rem 8px $spacer-xsmall
.uni-spacer--small--btm 0.75rem 12px $spacer-small
.uni-spacer--medium--btm 1rem 16px $spacer-medium
.uni-spacer--large--btm 1.5rem 24px $spacer-large
.uni-spacer--xlarge--btm 2rem 32px $spacer-xlarge
.uni-spacer--xxlarge--btm 3rem 48px $spacer-xxlarge

Horizontal (right and left)

Class name Rem value Pixel value Associated variable
.uni-spacer--xxsmall--horiz 0.25rem 4px $spacer-xxsmall
.uni-spacer--xsmall--horiz 0.5rem 8px $spacer-xsmall
.uni-spacer--small--horiz 0.75rem 12px $spacer-small
.uni-spacer--medium--horiz 1rem 16px $spacer-medium
.uni-spacer--large--horiz 1.5rem 24px $spacer-large
.uni-spacer--xlarge--horiz 2rem 32px $spacer-xlarge
.uni-spacer--xxlarge--horiz 3rem 48px $spacer-xxlarge

Right

Class name Rem value Pixel value Associated variable
.uni-spacer--xxsmall--right 0.25rem 4px $spacer-xxsmall
.uni-spacer--xsmall--right 0.5rem 8px $spacer-xsmall
.uni-spacer--small--right 0.75rem 12px $spacer-small
.uni-spacer--medium--right 1rem 16px $spacer-medium
.uni-spacer--large--right 1.5rem 24px $spacer-large
.uni-spacer--xlarge--right 2rem 32px $spacer-xlarge
.uni-spacer--xxlarge--right 3rem 48px $spacer-xxlarge

Left

Class name Rem value Pixel value Associated variable
.uni-spacer--xxsmall--left 0.25rem 4px $spacer-xxsmall
.uni-spacer--xsmall--left 0.5rem 8px $spacer-xsmall
.uni-spacer--small--left 0.75rem 12px $spacer-small
.uni-spacer--medium--left 1rem 16px $spacer-medium
.uni-spacer--large--left 1.5rem 24px $spacer-large
.uni-spacer--xlarge--left 2rem 32px $spacer-xlarge
.uni-spacer--xxlarge--left 3rem 48px $spacer-xxlarge

# Legacy Padding

These legacy padding classes are deprecated. Instead use the uniform informed space classes for padding.

All (top, right, bottom, left)

Class name Rem value Pixel value Associated variable
.uni-pad--xxsmall 0.25rem 4px $pad-xxsmall
.uni-pad--xsmall 0.5rem 8px $pad-xsmall
.uni-pad--small 0.75rem 12px $pad-small
.uni-pad--medium 1rem 16px $pad-medium
.uni-pad--large 1.5rem 24px $pad-large
.uni-pad--xlarge 2rem 32px $pad-xlarge
.uni-pad--xxlarge 3rem 48px $pad-xxlarge

Vertical (top and bottom)

Class name Rem value Pixel value Associated variable
.uni-pad--xxsmall--vert 0.25rem 4px $pad-xxsmall
.uni-pad--xsmall--vert 0.5rem 8px $pad-xsmall
.uni-pad--small--vert 0.75rem 12px $pad-small
.uni-pad--medium--vert 1rem 16px $pad-medium
.uni-pad--large--vert 1.5rem 24px $pad-large
.uni-pad--xlarge--vert 2rem 32px $pad-xlarge
.uni-pad--xxlarge--vert 3rem 48px $pad-xxlarge

Top

Class name Rem value Pixel value Associated variable
.uni-pad--xxsmall--top 0.25rem 4px $pad-xxsmall
.uni-pad--xsmall--top 0.5rem 8px $pad-xsmall
.uni-pad--small--top 0.75rem 12px $pad-small
.uni-pad--medium--top 1rem 16px $pad-medium
.uni-pad--large--top 1.5rem 24px $pad-large
.uni-pad--xlarge--top 2rem 32px $pad-xlarge
.uni-pad--xxlarge--top 3rem 48px $pad-xxlarge

Bottom

Class name Rem value Pixel value Associated variable
.uni-pad--xxsmall--btm 0.25rem 4px $pad-xxsmall
.uni-pad--xsmall--btm 0.5rem 8px $pad-xsmall
.uni-pad--small--btm 0.75rem 12px $pad-small
.uni-pad--medium--btm 1rem 16px $pad-medium
.uni-pad--large--btm 1.5rem 24px $pad-large
.uni-pad--xlarge--btm 2rem 32px $pad-xlarge
.uni-pad--xxlarge--btm 3rem 48px $pad-xxlarge

Horizontal (right and left)

Class name Rem value Pixel value Associated variable
.uni-pad--xxsmall--horiz 0.25rem 4px $pad-xxsmall
.uni-pad--xsmall--horiz 0.5rem 8px $pad-xsmall
.uni-pad--small--horiz 0.75rem 12px $pad-small
.uni-pad--medium--horiz 1rem 16px $pad-medium
.uni-pad--large--horiz 1.5rem 24px $pad-large
.uni-pad--xlarge--horiz 2rem 32px $pad-xlarge
.uni-pad--xxlarge--horiz 3rem 48px $pad-xxlarge

Right

Class name Rem value Pixel value Associated variable
.uni-pad--xxsmall--right 0.25rem 4px $pad-xxsmall
.uni-pad--xsmall--right 0.5rem 8px $pad-xsmall
.uni-pad--small--right 0.75rem 12px $pad-small
.uni-pad--medium--right 1rem 16px $pad-medium
.uni-pad--large--right 1.5rem 24px $pad-large
.uni-pad--xlarge--right 2rem 32px $pad-xlarge
.uni-pad--xxlarge--right 3rem 48px $pad-xxlarge

Left

Class name Rem value Pixel value Associated variable
.uni-pad--xxsmall--left 0.25rem 4px $pad-xxsmall
.uni-pad--xsmall--left 0.5rem 8px $pad-xsmall
.uni-pad--small--left 0.75rem 12px $pad-small
.uni-pad--medium--left 1rem 16px $pad-medium
.uni-pad--large--left 1.5rem 24px $pad-large
.uni-pad--xlarge--left 2rem 32px $pad-xlarge
.uni-pad--xxlarge--left 3rem 48px $pad-xxlarge