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-8
margin-top: 8px (0.5REM)
u-mt-16
margin-top: 16px (1REM)
u-mt-32
margin-top: 32px (2REM)
u-mt-48
margin-top: 48px (3REM)
u-mt-64
margin-top: 64px (4REM)
u-mt-96
margin-top: 96px (6REM)
u-mt-auto
margin-top: auto
Bottom
u-mb-0
margin-bottom: 0
u-mb-8
margin-bottom: 8px (0.5REM)
u-mb-16
margin-bottom: 16px (1REM)
u-mb-32
margin-bottom: 32px (2REM)
u-mb-48
margin-bottom: 48px (3REM)
u-mb-64
margin-bottom: 64px (4REM)
u-mb-96
margin-bottom: 96px (6REM)
Right
u-mr-0
margin-right: 0
Left
u-ml-0
margin-left: 0
Other
u-m-0
margin: 0
u-mlr-auto
margin: 0 auto; (centers element))
Padding
Bottom
u-pb-0
padding-bottom: 0
u-pb-8
padding-bottom: 8px (0.5REM)
u-pb-16
padding-bottom: 16px (1REM)
u-pb-32
padding-bottom: 32px (2REM)
u-pb-48
padding-bottom: 48px (3REM)
u-pb-64
padding-bottom: 64px (4rem)
Top
u-pt-0
padding-top: 0
u-pt-8
padding-top: 8px (0.5REM)
u-pt-16
padding-top: 16px (1REM)
u-pt-32
padding-top: 32px (2REM)
u-pt-48
padding-top: 48px (3REM)
u-pt-64
padding-top: 64px (4REM)
All
u-p-0
padding: 0
u-p-16
padding: 16px (1rem)
u-p-32
padding: 32px (2rem)
u-p-48
padding: 48px (3rem)
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
u-text-left
text-align: LEFT
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
Other
Position
u-position-relative
position: relative
u-z-index-1
position: relative + z-index: 1
u-position-sticky
position: sticky / top: 0
You can add spacing from the top and use the cc-#, transformed to rem, as an approach for classes. eg: cc-160 would be 10rem from the top.
Text
u-text-semibold
font-weight: 600
u-lineheight-tight
line-height: 0.95;
u-quote-indent
text-indent: -0.4em
Images
u-img-cover
Absolute position image element set to fit: cover so it can be used within any relative positioned wrapper element.
u-img-wrapper
A relative wrapper that uses aspect ratio 16:9 to accommodate for most use cases.
An Absolutely positioned image element set to fit: cover is needed inside.
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
white, bordered component
styles__sticker-components
style guide only
pixel grid background wrapper
pixel grid background wrapper
styles__utility-center
Style Guide only
Utility description Wrapper
Utility description Wrapper