Utilities

Global modifier classes to be add to any element in order to make common, consistent styling changes to size, display, spacing, alignment, etc. Global utility classes like the below are prefixed with u- for easier discovery.

Spacing

Margin

Top

u-mt-0
margin-top: 0
u-mt-1
margin-top: 1em
u-mt-2
margin-top: 2em
u-mt-3
margin-top: 3em
u-mt-auto
margin-top: auto

Bottom

u-mb-0
margin-bottom: 0
u-mb-1
margin-bottom: 1em
u-mb-2
margin-bottom: 2em
u-mb-3
margin-bottom: 3em

Right

u-mr-0
margin-right: 0em
u-mr-1
margin-right: 1em
u-mr-2
margin-right: 2em
u-mr-3
margin-right: 3em

Left

u-ml-0
margin-left: 0em
u-ml-1
margin-left: 1em
u-ml-2
margin-left: 2em
u-ml-3
margin-left: 3em

Bottom - Mobile

u-sm-mb-0
margin-bottom: 0 (Mobile Landscape & Portrait)
u-sm-mb-1
margin-bottom: 1em (Mobile Landscape & Portrait)
u-sm-mb-2
margin-bottom: 2em (Mobile Landscape & Portrait)
u-sm-mb-3
margin-bottom: 3em (Mobile Landscape & Portrait)

Top - Mobile

u-sm-mt-0
margin-top: 0 (Mobile Landscape & Portrait)
u-sm-mt-1
margin-top: 1em (Mobile Landscape & Portrait)
u-sm-mt-2
margin-top: 2em (Mobile Landscape & Portrait)
u-sm-mt-3
margin-top: 3em (Mobile Landscape & Portrait)

Other

u-m-0
margin: 0
u-mlr-auto
margin: 0 auto; (centers element))

Padding

Bottom Side

u-pb-0
padding-bottom: 0
u-pb-1
padding-bottom: 1em
u-pb-2
padding-bottom: 2em
u-pb-3
padding-bottom: 3em

Top Side

u-pt-0
padding-top: 0
u-pt-1
padding-top: 1em
u-pt-2
padding-top: 2em
u-pt-3
padding-top: 3em

All Sides

u-p-0
padding: 0
u-p-1
padding: 1em
u-p-2
padding: 2em

Size

Width

u-w-50
Width: 50%
u-w-60
Width: 60%
u-w-70
Width: 70%
u-w-80
Width: 80%
u-w-90
Width: 90%
u-w-100
Width: 100%

Height

u-h-100
height: 100%

Alignment

Text

u-text-center
text-align: center
u-text-right
text-align: right

Visibility

Display

u-d-block
display: block
u-d-none
display: none
u-d-inline-block
display: inline-block

Overflow

u-overflow-hidden
overflow: hidden
u-overflow-visible
overflow: visible

Screen Readers

u-sr-only
hide text visually, but remains for screen readers
Screen Reader Only
u-link-overlay
A link block that overlays a position: relative element like a card to make the whole think clickable, while retaining only a simple screen reader friendly link.

Other

Position

u-position-relative
position: relative
u-position-sticky
position: sticky / top: 0
u-z-index-1
position: relative + z-index: 1

Text

u-text-medium
font-weight: medium

Images

u-img-cover
Absolute position image element set to fit: cover so it can be used within any relative positioned wrapper element.

Prevent delete

Anytime you create classes that are then used within embeds or custom code, first create a blank instance of them here so they can't be removed when the unused CSS classes are cleared from the project.

Style guide only

styles__visual-component
Style Guide only
white, bordered component
styles__sticker-components
style guide only
pixel grid background wrapper
styles__utility-center
Style Guide only
Utility description Wrapper

Project Specific