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
u-mt-1
u-mt-2
u-mt-3
u-mt-auto
Bottom
u-mb-0
u-mb-1
u-mb-2
u-mb-3
Right
u-mr-0
u-mr-1
u-mr-2
u-mr-3
Left
u-ml-0
u-ml-1
u-ml-2
u-ml-3
Bottom - Mobile
u-sm-mb-0
u-sm-mb-1
u-sm-mb-2
u-sm-mb-3
Top - Mobile
u-sm-mt-0
u-sm-mt-1
u-sm-mt-2
u-sm-mt-3
Other
u-m-0
u-mlr-auto
Padding
Bottom Side
u-pb-0
u-pb-1
u-pb-2
u-pb-3
Top Side
u-pt-0
u-pt-1
u-pt-2
u-pt-3
All Sides
u-p-0
u-p-1
u-p-2
Size
Width
u-w-50
u-w-60
u-w-70
u-w-80
u-w-90
u-w-100
Height
u-h-100
Alignment
Text
u-text-center
u-text-right
Other
Position
u-position-relative
u-position-sticky
u-z-index-1
Text
u-text-medium
Images
u-img-cover
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
styles__sticker-components
styles__utility-center