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
Bottom Side
u-mb-0
u-mb-1
u-mb-2
u-mb-3
Top Side
u-mt-0
u-mt-1
u-mt-2
u-mt-3
u-mt-auto
Other
u-m-0
u-mlr-auto
Bottom Side- Mobile
u-sm-mb-0
u-sm-mb-1
u-sm-mb-2
u-sm-mb-3
Top Side - Mobile
u-sm-mt-0
u-sm-mt-1
u-sm-mt-2
u-sm-mt-3
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
Visibility
Display
u-d-block
u-d-none
u-d-inline-block
Overflow
u-overflow-hidden
u-overflow-visible
Screen Readers
sr-only
Screen Reader Only
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