Thumbprint logo

Atomic

CSS classes for composing layouts

Aspect Ratio

  • Available ratios are 16:9, 10:13, 8:5, 7:3, and 1:1.
  • Used primarily to lock elements with background images in into a desired proportion.
  • Also for fluid media embedded from third party sites like YouTube, Vimeo, etc.
1:1
7:3
10:13
8:5
16:9

Block-level elements

<div className="aspect-ratio aspect-ratio-8x5" style="background-image:url(...)"></div>

Don’t use any additional CSS on the element that changes height or padding.

Video embeds and iframes

<div className="aspect-ratio aspect-ratio-16x9">
    <iframe className="aspect-ratio-object" src="https://player.vimeo.com/..."></iframe>
</div>

When using aspect-ratio-object be sure the embedded content does not have conflicting height or width values.

aspect-ratio
height: 0 !important
position: relative !important
aspect-ratio-16x9
padding-bottom: 56.25% !important
aspect-ratio-10x13
padding-bottom: 130% !important
aspect-ratio-8x5
padding-bottom: 62.5% !important
aspect-ratio-7x3
padding-bottom: 42.86% !important
aspect-ratio-1x1
padding-bottom: 100% !important
aspect-ratio-object
position: absolute !important
top: 0 !important
right: 0 !important
bottom: 0 !important
left: 0 !important
width: 100% !important
height: 100% !important

Background Position

Sets location of a background image.

bg-center
background-repeat: no-repeat !important
background-position: center center !important
bg-top
background-repeat: no-repeat !important
background-position: top center !important
bg-right
background-repeat: no-repeat !important
background-position: center right !important
bg-bottom
background-repeat: no-repeat !important
background-position: bottom center !important
bg-left
background-repeat: no-repeat !important
background-position: center left !important
s_bg-center
background-repeat: no-repeat !important
background-position: center center !important
s_bg-top
background-repeat: no-repeat !important
background-position: top center !important
s_bg-right
background-repeat: no-repeat !important
background-position: center right !important
s_bg-bottom
background-repeat: no-repeat !important
background-position: bottom center !important
s_bg-left
background-repeat: no-repeat !important
background-position: center left !important
m_bg-center
background-repeat: no-repeat !important
background-position: center center !important
m_bg-top
background-repeat: no-repeat !important
background-position: top center !important
m_bg-right
background-repeat: no-repeat !important
background-position: center right !important
m_bg-bottom
background-repeat: no-repeat !important
background-position: bottom center !important
m_bg-left
background-repeat: no-repeat !important
background-position: center left !important
l_bg-center
background-repeat: no-repeat !important
background-position: center center !important
l_bg-top
background-repeat: no-repeat !important
background-position: top center !important
l_bg-right
background-repeat: no-repeat !important
background-position: center right !important
l_bg-bottom
background-repeat: no-repeat !important
background-position: bottom center !important
l_bg-left
background-repeat: no-repeat !important
background-position: center left !important

Background Size

  • Determines how an background image will fill the container.
  • Use with background-position classes to set image location.
contain will ensure that the entire image is displayed within the element, regardless of the elements dimensions.
cover will ensure the entire element is covered but won’t guarantee that the entire image will be shown.
cover
background-size: cover !important
contain
background-size: contain !important
s_cover
background-size: cover !important
s_contain
background-size: contain !important
m_cover
background-size: cover !important
m_contain
background-size: contain !important
l_cover
background-size: cover !important
l_contain
background-size: contain !important

Border

  • Set border on all sides or individual sides.
  • Use with border-colors classes.
ba b-blue
bt b-blue
bb b-blue
ba
border-style: solid !important
border-width: 1px !important
bt
border-top-style: solid !important
border-top-width: 1px !important
br
border-right-style: solid !important
border-right-width: 1px !important
bb
border-bottom-style: solid !important
border-bottom-width: 1px !important
bl
border-left-style: solid !important
border-left-width: 1px !important
bn
border-style: none !important
border-width: 0 !important
s_ba
border-style: solid !important
border-width: 1px !important
s_bt
border-top-style: solid !important
border-top-width: 1px !important
s_br
border-right-style: solid !important
border-right-width: 1px !important
s_bb
border-bottom-style: solid !important
border-bottom-width: 1px !important
s_bl
border-left-style: solid !important
border-left-width: 1px !important
s_bn
border-style: none !important
border-width: 0 !important
m_ba
border-style: solid !important
border-width: 1px !important
m_bt
border-top-style: solid !important
border-top-width: 1px !important
m_br
border-right-style: solid !important
border-right-width: 1px !important
m_bb
border-bottom-style: solid !important
border-bottom-width: 1px !important
m_bl
border-left-style: solid !important
border-left-width: 1px !important
m_bn
border-style: none !important
border-width: 0 !important
l_ba
border-style: solid !important
border-width: 1px !important
l_bt
border-top-style: solid !important
border-top-width: 1px !important
l_br
border-right-style: solid !important
border-right-width: 1px !important
l_bb
border-bottom-style: solid !important
border-bottom-width: 1px !important
l_bl
border-left-style: solid !important
border-left-width: 1px !important
l_bn
border-style: none !important
border-width: 0 !important

Border Color

Applies border color to any active border.

ba b-gray
ba b-black
ba b-blue
bb b-red
bl b-red
bt b-red
b-black
border-color: #2f3033 !important
b-black-300
border-color: #676d73 !important
b-white
border-color: #ffffff !important
b-blue
border-color: #009fd9 !important
b-indigo
border-color: #5968e2 !important
b-purple
border-color: #8d56eb !important
b-green
border-color: #2db783 !important
b-yellow
border-color: #febe14 !important
b-red
border-color: #ff5a5f !important
b-gray
border-color: #d3d4d5 !important
b-gray-200
border-color: #fafafa !important
b-gray-300
border-color: #e9eced !important

Border Radius

Add rounded corners.

br2
br3
br3 br-top
br0
border-radius: 0 !important
br1
border-radius: 2px !important
br2
border-radius: 4px !important
br3
border-radius: 6px !important
br-100
border-radius: 50% !important
br-pill
border-radius: 9999px !important
br-bottom
border-top-left-radius: 0 !important
border-top-right-radius: 0 !important
br-top
border-bottom-left-radius: 0 !important
border-bottom-right-radius: 0 !important
br-right
border-top-left-radius: 0 !important
border-bottom-left-radius: 0 !important
br-left
border-top-right-radius: 0 !important
border-bottom-right-radius: 0 !important
s_br0
border-radius: 0 !important
s_br1
border-radius: 2px !important
s_br2
border-radius: 4px !important
s_br3
border-radius: 6px !important
s_br-100
border-radius: 50% !important
s_br-pill
border-radius: 9999px !important
s_br-bottom
border-top-left-radius: 0 !important
border-top-right-radius: 0 !important
s_br-top
border-bottom-left-radius: 0 !important
border-bottom-right-radius: 0 !important
s_br-right
border-top-left-radius: 0 !important
border-bottom-left-radius: 0 !important
s_br-left
border-top-right-radius: 0 !important
border-bottom-right-radius: 0 !important
m_br0
border-radius: 0 !important
m_br1
border-radius: 2px !important
m_br2
border-radius: 4px !important
m_br3
border-radius: 6px !important
m_br-100
border-radius: 50% !important
m_br-pill
border-radius: 9999px !important
m_br-bottom
border-top-left-radius: 0 !important
border-top-right-radius: 0 !important
m_br-top
border-bottom-left-radius: 0 !important
border-bottom-right-radius: 0 !important
m_br-right
border-top-left-radius: 0 !important
border-bottom-left-radius: 0 !important
m_br-left
border-top-right-radius: 0 !important
border-bottom-right-radius: 0 !important
l_br0
border-radius: 0 !important
l_br1
border-radius: 2px !important
l_br2
border-radius: 4px !important
l_br3
border-radius: 6px !important
l_br-100
border-radius: 50% !important
l_br-pill
border-radius: 9999px !important
l_br-bottom
border-top-left-radius: 0 !important
border-top-right-radius: 0 !important
l_br-top
border-bottom-left-radius: 0 !important
border-bottom-right-radius: 0 !important
l_br-right
border-top-left-radius: 0 !important
border-bottom-left-radius: 0 !important
l_br-left
border-top-right-radius: 0 !important
border-bottom-right-radius: 0 !important

Border Style

Sets the style of the border.

  • By default this sets the border style for all sides.
  • Due to the way the CSS spec works if you want it to apply to only certain sides, you’ll need to disable the sides you don’t want.
ba b-blue b-dotted
ba b-blue b-dashed br-0 bb-0 bl-0
b-dotted
border-style: dotted !important
b-dashed
border-style: dashed !important
b-solid
border-style: solid !important
b-none
border-style: none !important
s_b-dotted
border-style: dotted !important
s_b-dashed
border-style: dashed !important
s_b-solid
border-style: solid !important
s_b-none
border-style: none !important
m_b-dotted
border-style: dotted !important
m_b-dashed
border-style: dashed !important
m_b-solid
border-style: solid !important
m_b-none
border-style: none !important
l_b-dotted
border-style: dotted !important
l_b-dashed
border-style: dashed !important
l_b-solid
border-style: solid !important
l_b-none
border-style: none !important

Border Width

Border widths are set to 1px by default, these classes increase border width.

ba b-gray bw-2
ba b-gray bw-3
ba b-gray bw-4
bw-0
border-width: 0 !important
bw-1
border-width: 1px !important
bw-2
border-width: 2px !important
bw-3
border-width: 3px !important
bw-4
border-width: 4px !important
bt-0
border-top-width: 0 !important
br-0
border-right-width: 0 !important
bb-0
border-bottom-width: 0 !important
bl-0
border-left-width: 0 !important
s_bw-0
border-width: 0 !important
s_bw-1
border-width: 1px !important
s_bw-2
border-width: 2px !important
s_bw-3
border-width: 3px !important
s_bw-4
border-width: 4px !important
s_bt-0
border-top-width: 0 !important
s_br-0
border-right-width: 0 !important
s_bb-0
border-bottom-width: 0 !important
s_bl-0
border-left-width: 0 !important
m_bw-0
border-width: 0 !important
m_bw-1
border-width: 1px !important
m_bw-2
border-width: 2px !important
m_bw-3
border-width: 3px !important
m_bw-4
border-width: 4px !important
m_bt-0
border-top-width: 0 !important
m_br-0
border-right-width: 0 !important
m_bb-0
border-bottom-width: 0 !important
m_bl-0
border-left-width: 0 !important
l_bw-0
border-width: 0 !important
l_bw-1
border-width: 1px !important
l_bw-2
border-width: 2px !important
l_bw-3
border-width: 3px !important
l_bw-4
border-width: 4px !important
l_bt-0
border-top-width: 0 !important
l_br-0
border-right-width: 0 !important
l_bb-0
border-bottom-width: 0 !important
l_bl-0
border-left-width: 0 !important

Box Shadow

shadow-100
shadow-200
shadow-300
shadow-400
shadow-none
box-shadow: none !important
shadow-100
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1) !important
shadow-200
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15) !important
shadow-300
box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.15) !important
shadow-400
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2) !important
s_shadow-none
box-shadow: none !important
s_shadow-100
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1) !important
s_shadow-200
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15) !important
s_shadow-300
box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.15) !important
s_shadow-400
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2) !important
m_shadow-none
box-shadow: none !important
m_shadow-100
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1) !important
m_shadow-200
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15) !important
m_shadow-300
box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.15) !important
m_shadow-400
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2) !important
l_shadow-none
box-shadow: none !important
l_shadow-100
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1) !important
l_shadow-200
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15) !important
l_shadow-300
box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.15) !important
l_shadow-400
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2) !important

Color

  • Colors for text, links, and backgrounds.
  • Be sure to follow color usage guidelines.
This is copy.
black
This is copy
black-300
 
bg-black
 
bg-gray-200
The svg icon and this text are inside an anchor element but they are not colored blue because they are inheriting their color from a parent.
color-inherit
color-inherit
color: inherit !important
white
color: #ffffff !important
black
color: #2f3033 !important
black-300
color: #676d73 !important
blue
color: #009fd9 !important
indigo
color: #5968e2 !important
purple
color: #8d56eb !important
green
color: #2db783 !important
yellow
color: #febe14 !important
red
color: #ff5a5f !important
gray
color: #d3d4d5 !important
gray-200
color: #fafafa !important
gray-300
color: #e9eced !important
blue-500
color: #007fad !important
indigo-500
color: #4f54b3 !important
purple-500
color: #6637b6 !important
green-500
color: #16855b !important
yellow-500
color: #a77005 !important
red-500
color: #b22d31 !important
blue-600
color: #005979 !important
indigo-600
color: #383c80 !important
purple-600
color: #492782 !important
green-600
color: #054e33 !important
yellow-600
color: #714601 !important
red-600
color: #7d0d10 !important
bg-white
background-color: #ffffff !important
bg-black
background-color: #2f3033 !important
bg-black-300
background-color: #676d73 !important
bg-blue
background-color: #009fd9 !important
bg-blue-100
background-color: #eaf6fa !important
bg-indigo
background-color: #5968e2 !important
bg-indigo-100
background-color: #e8f1fd !important
bg-purple
background-color: #8d56eb !important
bg-purple-100
background-color: #f5efff !important
bg-green
background-color: #2db783 !important
bg-green-100
background-color: #e1fdf3 !important
bg-yellow
background-color: #febe14 !important
bg-yellow-100
background-color: #fdf7e7 !important
bg-red
background-color: #ff5a5f !important
bg-red-100
background-color: #ffeff0 !important
bg-gray
background-color: #d3d4d5 !important
bg-gray-200
background-color: #fafafa !important
bg-gray-300
background-color: #e9eced !important
hover-white
color: #ffffff !important
color: #ffffff !important
hover-black
color: #2f3033 !important
color: #2f3033 !important
hover-black-300
color: #676d73 !important
color: #676d73 !important
hover-blue
color: #009fd9 !important
color: #009fd9 !important
hover-indigo
color: #5968e2 !important
color: #5968e2 !important
hover-purple
color: #8d56eb !important
color: #8d56eb !important
hover-green
color: #2db783 !important
color: #2db783 !important
hover-yellow
color: #febe14 !important
color: #febe14 !important
hover-red
color: #ff5a5f !important
color: #ff5a5f !important
hover-gray
color: #d3d4d5 !important
color: #d3d4d5 !important
hover-gray-200
color: #fafafa !important
color: #fafafa !important
hover-gray-300
color: #e9eced !important
color: #e9eced !important
hover-bg-white
background-color: #ffffff !important
background-color: #ffffff !important
hover-bg-black
background-color: #2f3033 !important
background-color: #2f3033 !important
hover-bg-black-300
background-color: #676d73 !important
background-color: #676d73 !important
hover-bg-blue
background-color: #009fd9 !important
background-color: #009fd9 !important
hover-bg-indigo
background-color: #5968e2 !important
background-color: #5968e2 !important
hover-bg-purple
background-color: #8d56eb !important
background-color: #8d56eb !important
hover-bg-green
background-color: #2db783 !important
background-color: #2db783 !important
hover-bg-yellow
background-color: #febe14 !important
background-color: #febe14 !important
hover-bg-red
background-color: #ff5a5f !important
background-color: #ff5a5f !important
hover-bg-gray
background-color: #d3d4d5 !important
background-color: #d3d4d5 !important
hover-bg-gray-200
background-color: #fafafa !important
background-color: #fafafa !important
hover-bg-gray-300
background-color: #e9eced !important
background-color: #e9eced !important

Coordinates

Use in combination with the position module.

top0
top: 0 !important
right0
right: 0 !important
bottom0
bottom: 0 !important
left0
left: 0 !important
top1
top: 8px !important
right1
right: 8px !important
bottom1
bottom: 8px !important
left1
left: 8px !important
top2
top: 16px !important
right2
right: 16px !important
bottom2
bottom: 16px !important
left2
left: 16px !important
-top1
top: -8px !important
-right1
right: -8px !important
-bottom1
bottom: -8px !important
-left1
left: -8px !important
-top2
top: -16px !important
-right2
right: -16px !important
-bottom2
bottom: -16px !important
-left2
left: -16px !important
absolute-fill
top: 0 !important
right: 0 !important
bottom: 0 !important
left: 0 !important
top-0
top: 0 !important
top-1
top: 1px !important
top-2
top: 2px !important
top-3
top: 3px !important
top-4
top: 4px !important
top-5
top: 5px !important
right-0
right: 0 !important
right-1
right: 1px !important
right-2
right: 2px !important
right-3
right: 3px !important
right-4
right: 4px !important
right-5
right: 5px !important
bottom-0
bottom: 0 !important
bottom-1
bottom: 1px !important
bottom-2
bottom: 2px !important
bottom-3
bottom: 3px !important
bottom-4
bottom: 4px !important
bottom-5
bottom: 5px !important
left-0
left: 0 !important
left-1
left: 1px !important
left-2
left: 2px !important
left-3
left: 3px !important
left-4
left: 4px !important
left-5
left: 5px !important
-top-1
top: -1px !important
-top-2
top: -2px !important
-top-3
top: -3px !important
-top-4
top: -4px !important
-top-5
top: -5px !important
-right-1
right: -1px !important
-right-2
right: -2px !important
-right-3
right: -3px !important
-right-4
right: -4px !important
-right-5
right: -5px !important
-bottom-1
bottom: -1px !important
-bottom-2
bottom: -2px !important
-bottom-3
bottom: -3px !important
-bottom-4
bottom: -4px !important
-bottom-5
bottom: -5px !important
-left-1
left: -1px !important
-left-2
left: -2px !important
-left-3
left: -3px !important
-left-4
left: -4px !important
-left-5
left: -5px !important
s_top0
top: 0 !important
s_right0
right: 0 !important
s_bottom0
bottom: 0 !important
s_left0
left: 0 !important
s_top1
top: 8px !important
s_right1
right: 8px !important
s_bottom1
bottom: 8px !important
s_left1
left: 8px !important
s_top2
top: 16px !important
s_right2
right: 16px !important
s_bottom2
bottom: 16px !important
s_left2
left: 16px !important
s_-top1
top: -8px !important
s_-right1
right: -8px !important
s_-bottom1
bottom: -8px !important
s_-left1
left: -8px !important
s_-top2
top: -16px !important
s_-right2
right: -16px !important
s_-bottom2
bottom: -16px !important
s_-left2
left: -16px !important
s_absolute-fill
top: 0 !important
right: 0 !important
bottom: 0 !important
left: 0 !important
s_top-0
top: 0 !important
s_top-1
top: 1px !important
s_top-2
top: 2px !important
s_top-3
top: 3px !important
s_top-4
top: 4px !important
s_top-5
top: 5px !important
s_right-0
right: 0 !important
s_right-1
right: 1px !important
s_right-2
right: 2px !important
s_right-3
right: 3px !important
s_right-4
right: 4px !important
s_right-5
right: 5px !important
s_bottom-0
bottom: 0 !important
s_bottom-1
bottom: 1px !important
s_bottom-2
bottom: 2px !important
s_bottom-3
bottom: 3px !important
s_bottom-4
bottom: 4px !important
s_bottom-5
bottom: 5px !important
s_left-0
left: 0 !important
s_left-1
left: 1px !important
s_left-2
left: 2px !important
s_left-3
left: 3px !important
s_left-4
left: 4px !important
s_left-5
left: 5px !important
s_-top-1
top: -1px !important
s_-top-2
top: -2px !important
s_-top-3
top: -3px !important
s_-top-4
top: -4px !important
s_-top-5
top: -5px !important
s_-right-1
right: -1px !important
s_-right-2
right: -2px !important
s_-right-3
right: -3px !important
s_-right-4
right: -4px !important
s_-right-5
right: -5px !important
s_-bottom-1
bottom: -1px !important
s_-bottom-2
bottom: -2px !important
s_-bottom-3
bottom: -3px !important
s_-bottom-4
bottom: -4px !important
s_-bottom-5
bottom: -5px !important
s_-left-1
left: -1px !important
s_-left-2
left: -2px !important
s_-left-3
left: -3px !important
s_-left-4
left: -4px !important
s_-left-5
left: -5px !important
m_top0
top: 0 !important
m_right0
right: 0 !important
m_bottom0
bottom: 0 !important
m_left0
left: 0 !important
m_top1
top: 8px !important
m_right1
right: 8px !important
m_bottom1
bottom: 8px !important
m_left1
left: 8px !important
m_top2
top: 16px !important
m_right2
right: 16px !important
m_bottom2
bottom: 16px !important
m_left2
left: 16px !important
m_-top1
top: -8px !important
m_-right1
right: -8px !important
m_-bottom1
bottom: -8px !important
m_-left1
left: -8px !important
m_-top2
top: -16px !important
m_-right2
right: -16px !important
m_-bottom2
bottom: -16px !important
m_-left2
left: -16px !important
m_absolute-fill
top: 0 !important
right: 0 !important
bottom: 0 !important
left: 0 !important
m_top-0
top: 0 !important
m_top-1
top: 1px !important
m_top-2
top: 2px !important
m_top-3
top: 3px !important
m_top-4
top: 4px !important
m_top-5
top: 5px !important
m_right-0
right: 0 !important
m_right-1
right: 1px !important
m_right-2
right: 2px !important
m_right-3
right: 3px !important
m_right-4
right: 4px !important
m_right-5
right: 5px !important
m_bottom-0
bottom: 0 !important
m_bottom-1
bottom: 1px !important
m_bottom-2
bottom: 2px !important
m_bottom-3
bottom: 3px !important
m_bottom-4
bottom: 4px !important
m_bottom-5
bottom: 5px !important
m_left-0
left: 0 !important
m_left-1
left: 1px !important
m_left-2
left: 2px !important
m_left-3
left: 3px !important
m_left-4
left: 4px !important
m_left-5
left: 5px !important
m_-top-1
top: -1px !important
m_-top-2
top: -2px !important
m_-top-3
top: -3px !important
m_-top-4
top: -4px !important
m_-top-5
top: -5px !important
m_-right-1
right: -1px !important
m_-right-2
right: -2px !important
m_-right-3
right: -3px !important
m_-right-4
right: -4px !important
m_-right-5
right: -5px !important
m_-bottom-1
bottom: -1px !important
m_-bottom-2
bottom: -2px !important
m_-bottom-3
bottom: -3px !important
m_-bottom-4
bottom: -4px !important
m_-bottom-5
bottom: -5px !important
m_-left-1
left: -1px !important
m_-left-2
left: -2px !important
m_-left-3
left: -3px !important
m_-left-4
left: -4px !important
m_-left-5
left: -5px !important
l_top0
top: 0 !important
l_right0
right: 0 !important
l_bottom0
bottom: 0 !important
l_left0
left: 0 !important
l_top1
top: 8px !important
l_right1
right: 8px !important
l_bottom1
bottom: 8px !important
l_left1
left: 8px !important
l_top2
top: 16px !important
l_right2
right: 16px !important
l_bottom2
bottom: 16px !important
l_left2
left: 16px !important
l_-top1
top: -8px !important
l_-right1
right: -8px !important
l_-bottom1
bottom: -8px !important
l_-left1
left: -8px !important
l_-top2
top: -16px !important
l_-right2
right: -16px !important
l_-bottom2
bottom: -16px !important
l_-left2
left: -16px !important
l_absolute-fill
top: 0 !important
right: 0 !important
bottom: 0 !important
left: 0 !important
l_top-0
top: 0 !important
l_top-1
top: 1px !important
l_top-2
top: 2px !important
l_top-3
top: 3px !important
l_top-4
top: 4px !important
l_top-5
top: 5px !important
l_right-0
right: 0 !important
l_right-1
right: 1px !important
l_right-2
right: 2px !important
l_right-3
right: 3px !important
l_right-4
right: 4px !important
l_right-5
right: 5px !important
l_bottom-0
bottom: 0 !important
l_bottom-1
bottom: 1px !important
l_bottom-2
bottom: 2px !important
l_bottom-3
bottom: 3px !important
l_bottom-4
bottom: 4px !important
l_bottom-5
bottom: 5px !important
l_left-0
left: 0 !important
l_left-1
left: 1px !important
l_left-2
left: 2px !important
l_left-3
left: 3px !important
l_left-4
left: 4px !important
l_left-5
left: 5px !important
l_-top-1
top: -1px !important
l_-top-2
top: -2px !important
l_-top-3
top: -3px !important
l_-top-4
top: -4px !important
l_-top-5
top: -5px !important
l_-right-1
right: -1px !important
l_-right-2
right: -2px !important
l_-right-3
right: -3px !important
l_-right-4
right: -4px !important
l_-right-5
right: -5px !important
l_-bottom-1
bottom: -1px !important
l_-bottom-2
bottom: -2px !important
l_-bottom-3
bottom: -3px !important
l_-bottom-4
bottom: -4px !important
l_-bottom-5
bottom: -5px !important
l_-left-1
left: -1px !important
l_-left-2
left: -2px !important
l_-left-3
left: -3px !important
l_-left-4
left: -4px !important
l_-left-5
left: -5px !important

Cursor

Use to change the mouse cursor style.

cursor-pointer
cursor: pointer !important

Display

Options for block, inline, and tables elements.

dn
display: none !important
di
display: inline !important
db
display: block !important
dib
display: inline-block !important
dit
display: inline-table !important
dt
display: table !important
dtc
display: table-cell !important
dt-row
display: table-row !important
dt-row-group
display: table-row-group !important
dt-column
display: table-column !important
dt-column-group
display: table-column-group !important
dt-fixed
table-layout: fixed !important
width: 100% !important
s_dn
display: none !important
s_di
display: inline !important
s_db
display: block !important
s_dib
display: inline-block !important
s_dit
display: inline-table !important
s_dt
display: table !important
s_dtc
display: table-cell !important
s_dt-row
display: table-row !important
s_dt-row-group
display: table-row-group !important
s_dt-column
display: table-column !important
s_dt-column-group
display: table-column-group !important
s_dt-fixed
table-layout: fixed !important
width: 100% !important
m_dn
display: none !important
m_di
display: inline !important
m_db
display: block !important
m_dib
display: inline-block !important
m_dit
display: inline-table !important
m_dt
display: table !important
m_dtc
display: table-cell !important
m_dt-row
display: table-row !important
m_dt-row-group
display: table-row-group !important
m_dt-column
display: table-column !important
m_dt-column-group
display: table-column-group !important
m_dt-fixed
table-layout: fixed !important
width: 100% !important
l_dn
display: none !important
l_di
display: inline !important
l_db
display: block !important
l_dib
display: inline-block !important
l_dit
display: inline-table !important
l_dt
display: table !important
l_dtc
display: table-cell !important
l_dt-row
display: table-row !important
l_dt-row-group
display: table-row-group !important
l_dt-column
display: table-column !important
l_dt-column-group
display: table-column-group !important
l_dt-fixed
table-layout: fixed !important
width: 100% !important

Flexbox

flex
display: flex !important
inline-flex
display: inline-flex !important
flex-auto
flex: 1 1 auto !important
min-width: 0 !important
min-height: 0 !important
flex-1
flex: 1 1 0% !important
min-width: 0 !important
min-height: 0 !important
flex-2
flex: 2 1 0% !important
min-width: 0 !important
min-height: 0 !important
flex-3
flex: 3 1 0% !important
min-width: 0 !important
min-height: 0 !important
flex-none
flex: none !important
flex-column
flex-direction: column !important
flex-row
flex-direction: row !important
flex-wrap
flex-wrap: wrap !important
flex-nowrap
flex-wrap: nowrap !important
flex-wrap-reverse
flex-wrap: wrap-reverse !important
flex-column-reverse
flex-direction: column-reverse !important
flex-row-reverse
flex-direction: row-reverse !important
items-start
align-items: flex-start !important
items-end
align-items: flex-end !important
items-center
align-items: center !important
items-baseline
align-items: baseline !important
items-stretch
align-items: stretch !important
self-start
align-self: flex-start !important
self-end
align-self: flex-end !important
self-center
align-self: center !important
self-baseline
align-self: baseline !important
self-stretch
align-self: stretch !important
justify-start
justify-content: flex-start !important
justify-end
justify-content: flex-end !important
justify-center
justify-content: center !important
justify-between
justify-content: space-between !important
justify-around
justify-content: space-around !important
content-start
align-content: flex-start !important
content-end
align-content: flex-end !important
content-center
align-content: center !important
content-between
align-content: space-between !important
content-around
align-content: space-around !important
content-stretch
align-content: stretch !important
order-0
order: 0 !important
order-1
order: 1 !important
order-2
order: 2 !important
order-3
order: 3 !important
order-4
order: 4 !important
order-5
order: 5 !important
order-6
order: 6 !important
order-7
order: 7 !important
order-8
order: 8 !important
order-last
order: 99999 !important
flex-grow-0
flex-grow: 0 !important
flex-grow-1
flex-grow: 1 !important
flex-shrink-0
flex-shrink: 0 !important
flex-shrink-1
flex-shrink: 1 !important
s_flex
display: flex !important
s_inline-flex
display: inline-flex !important
s_flex-auto
flex: 1 1 auto !important
min-width: 0 !important
min-height: 0 !important
s_flex-1
flex: 1 1 0% !important
min-width: 0 !important
min-height: 0 !important
s_flex-2
flex: 2 1 0% !important
min-width: 0 !important
min-height: 0 !important
s_flex-3
flex: 3 1 0% !important
min-width: 0 !important
min-height: 0 !important
s_flex-none
flex: none !important
s_flex-column
flex-direction: column !important
s_flex-row
flex-direction: row !important
s_flex-wrap
flex-wrap: wrap !important
s_flex-nowrap
flex-wrap: nowrap !important
s_flex-wrap-reverse
flex-wrap: wrap-reverse !important
s_flex-column-reverse
flex-direction: column-reverse !important
s_flex-row-reverse
flex-direction: row-reverse !important
s_items-start
align-items: flex-start !important
s_items-end
align-items: flex-end !important
s_items-center
align-items: center !important
s_items-baseline
align-items: baseline !important
s_items-stretch
align-items: stretch !important
s_self-start
align-self: flex-start !important
s_self-end
align-self: flex-end !important
s_self-center
align-self: center !important
s_self-baseline
align-self: baseline !important
s_self-stretch
align-self: stretch !important
s_justify-start
justify-content: flex-start !important
s_justify-end
justify-content: flex-end !important
s_justify-center
justify-content: center !important
s_justify-between
justify-content: space-between !important
s_justify-around
justify-content: space-around !important
s_content-start
align-content: flex-start !important
s_content-end
align-content: flex-end !important
s_content-center
align-content: center !important
s_content-between
align-content: space-between !important
s_content-around
align-content: space-around !important
s_content-stretch
align-content: stretch !important
s_order-0
order: 0 !important
s_order-1
order: 1 !important
s_order-2
order: 2 !important
s_order-3
order: 3 !important
s_order-4
order: 4 !important
s_order-5
order: 5 !important
s_order-6
order: 6 !important
s_order-7
order: 7 !important
s_order-8
order: 8 !important
s_order-last
order: 99999 !important
s_flex-grow-0
flex-grow: 0 !important
s_flex-grow-1
flex-grow: 1 !important
s_flex-shrink-0
flex-shrink: 0 !important
s_flex-shrink-1
flex-shrink: 1 !important
m_flex
display: flex !important
m_inline-flex
display: inline-flex !important
m_flex-auto
flex: 1 1 auto !important
min-width: 0 !important
min-height: 0 !important
m_flex-1
flex: 1 1 0% !important
min-width: 0 !important
min-height: 0 !important
m_flex-2
flex: 2 1 0% !important
min-width: 0 !important
min-height: 0 !important
m_flex-3
flex: 3 1 0% !important
min-width: 0 !important
min-height: 0 !important
m_flex-none
flex: none !important
m_flex-column
flex-direction: column !important
m_flex-row
flex-direction: row !important
m_flex-wrap
flex-wrap: wrap !important
m_flex-nowrap
flex-wrap: nowrap !important
m_flex-wrap-reverse
flex-wrap: wrap-reverse !important
m_flex-column-reverse
flex-direction: column-reverse !important
m_flex-row-reverse
flex-direction: row-reverse !important
m_items-start
align-items: flex-start !important
m_items-end
align-items: flex-end !important
m_items-center
align-items: center !important
m_items-baseline
align-items: baseline !important
m_items-stretch
align-items: stretch !important
m_self-start
align-self: flex-start !important
m_self-end
align-self: flex-end !important
m_self-center
align-self: center !important
m_self-baseline
align-self: baseline !important
m_self-stretch
align-self: stretch !important
m_justify-start
justify-content: flex-start !important
m_justify-end
justify-content: flex-end !important
m_justify-center
justify-content: center !important
m_justify-between
justify-content: space-between !important
m_justify-around
justify-content: space-around !important
m_content-start
align-content: flex-start !important
m_content-end
align-content: flex-end !important
m_content-center
align-content: center !important
m_content-between
align-content: space-between !important
m_content-around
align-content: space-around !important
m_content-stretch
align-content: stretch !important
m_order-0
order: 0 !important
m_order-1
order: 1 !important
m_order-2
order: 2 !important
m_order-3
order: 3 !important
m_order-4
order: 4 !important
m_order-5
order: 5 !important
m_order-6
order: 6 !important
m_order-7
order: 7 !important
m_order-8
order: 8 !important
m_order-last
order: 99999 !important
m_flex-grow-0
flex-grow: 0 !important
m_flex-grow-1
flex-grow: 1 !important
m_flex-shrink-0
flex-shrink: 0 !important
m_flex-shrink-1
flex-shrink: 1 !important
l_flex
display: flex !important
l_inline-flex
display: inline-flex !important
l_flex-auto
flex: 1 1 auto !important
min-width: 0 !important
min-height: 0 !important
l_flex-1
flex: 1 1 0% !important
min-width: 0 !important
min-height: 0 !important
l_flex-2
flex: 2 1 0% !important
min-width: 0 !important
min-height: 0 !important
l_flex-3
flex: 3 1 0% !important
min-width: 0 !important
min-height: 0 !important
l_flex-none
flex: none !important
l_flex-column
flex-direction: column !important
l_flex-row
flex-direction: row !important
l_flex-wrap
flex-wrap: wrap !important
l_flex-nowrap
flex-wrap: nowrap !important
l_flex-wrap-reverse
flex-wrap: wrap-reverse !important
l_flex-column-reverse
flex-direction: column-reverse !important
l_flex-row-reverse
flex-direction: row-reverse !important
l_items-start
align-items: flex-start !important
l_items-end
align-items: flex-end !important
l_items-center
align-items: center !important
l_items-baseline
align-items: baseline !important
l_items-stretch
align-items: stretch !important
l_self-start
align-self: flex-start !important
l_self-end
align-self: flex-end !important
l_self-center
align-self: center !important
l_self-baseline
align-self: baseline !important
l_self-stretch
align-self: stretch !important
l_justify-start
justify-content: flex-start !important
l_justify-end
justify-content: flex-end !important
l_justify-center
justify-content: center !important
l_justify-between
justify-content: space-between !important
l_justify-around
justify-content: space-around !important
l_content-start
align-content: flex-start !important
l_content-end
align-content: flex-end !important
l_content-center
align-content: center !important
l_content-between
align-content: space-between !important
l_content-around
align-content: space-around !important
l_content-stretch
align-content: stretch !important
l_order-0
order: 0 !important
l_order-1
order: 1 !important
l_order-2
order: 2 !important
l_order-3
order: 3 !important
l_order-4
order: 4 !important
l_order-5
order: 5 !important
l_order-6
order: 6 !important
l_order-7
order: 7 !important
l_order-8
order: 8 !important
l_order-last
order: 99999 !important
l_flex-grow-0
flex-grow: 0 !important
l_flex-grow-1
flex-grow: 1 !important
l_flex-shrink-0
flex-shrink: 0 !important
l_flex-shrink-1
flex-shrink: 1 !important

Gap

col-gap0
column-gap: 0 !important
col-gap1
column-gap: 4px !important
col-gap2
column-gap: 8px !important
col-gap3
column-gap: 16px !important
col-gap4
column-gap: 24px !important
col-gap5
column-gap: 32px !important
col-gap6
column-gap: 64px !important
col-gap7
column-gap: 128px !important
col-gap8
column-gap: 256px !important
row-gap0
row-gap: 0 !important
row-gap1
row-gap: 4px !important
row-gap2
row-gap: 8px !important
row-gap3
row-gap: 16px !important
row-gap4
row-gap: 24px !important
row-gap5
row-gap: 32px !important
row-gap6
row-gap: 64px !important
row-gap7
row-gap: 128px !important
row-gap8
row-gap: 256px !important
s_col-gap0
column-gap: 0 !important
s_col-gap1
column-gap: 4px !important
s_col-gap2
column-gap: 8px !important
s_col-gap3
column-gap: 16px !important
s_col-gap4
column-gap: 24px !important
s_col-gap5
column-gap: 32px !important
s_col-gap6
column-gap: 64px !important
s_col-gap7
column-gap: 128px !important
s_col-gap8
column-gap: 256px !important
s_row-gap0
row-gap: 0 !important
s_row-gap1
row-gap: 4px !important
s_row-gap2
row-gap: 8px !important
s_row-gap3
row-gap: 16px !important
s_row-gap4
row-gap: 24px !important
s_row-gap5
row-gap: 32px !important
s_row-gap6
row-gap: 64px !important
s_row-gap7
row-gap: 128px !important
s_row-gap8
row-gap: 256px !important
m_col-gap0
column-gap: 0 !important
m_col-gap1
column-gap: 4px !important
m_col-gap2
column-gap: 8px !important
m_col-gap3
column-gap: 16px !important
m_col-gap4
column-gap: 24px !important
m_col-gap5
column-gap: 32px !important
m_col-gap6
column-gap: 64px !important
m_col-gap7
column-gap: 128px !important
m_col-gap8
column-gap: 256px !important
m_row-gap0
row-gap: 0 !important
m_row-gap1
row-gap: 4px !important
m_row-gap2
row-gap: 8px !important
m_row-gap3
row-gap: 16px !important
m_row-gap4
row-gap: 24px !important
m_row-gap5
row-gap: 32px !important
m_row-gap6
row-gap: 64px !important
m_row-gap7
row-gap: 128px !important
m_row-gap8
row-gap: 256px !important
l_col-gap0
column-gap: 0 !important
l_col-gap1
column-gap: 4px !important
l_col-gap2
column-gap: 8px !important
l_col-gap3
column-gap: 16px !important
l_col-gap4
column-gap: 24px !important
l_col-gap5
column-gap: 32px !important
l_col-gap6
column-gap: 64px !important
l_col-gap7
column-gap: 128px !important
l_col-gap8
column-gap: 256px !important
l_row-gap0
row-gap: 0 !important
l_row-gap1
row-gap: 4px !important
l_row-gap2
row-gap: 8px !important
l_row-gap3
row-gap: 16px !important
l_row-gap4
row-gap: 24px !important
l_row-gap5
row-gap: 32px !important
l_row-gap6
row-gap: 64px !important
l_row-gap7
row-gap: 128px !important
l_row-gap8
row-gap: 256px !important

Font Weight

  • Our Rise font only supports two weights: 400 and 700.
  • Use only when Typecomponents are not adequate.
I am the default weight.
normal
I am the bold weight.
b
normal
font-weight: 400 !important
b
font-weight: 700 !important
s_normal
font-weight: 400 !important
s_b
font-weight: 700 !important
m_normal
font-weight: 400 !important
m_b
font-weight: 700 !important
l_normal
font-weight: 400 !important
l_b
font-weight: 700 !important

Grid

These classes should be used in place of the SCSSgrid. That has been deprecated.

  • Columns should be divisible by 12.
  • The immediate child of a grid will default to 100% width, which is common for mobile.
  • Use col-* classes to declare width of column.
  • A grid must wrap col as immediate children.
grid
grid grid-wide
grid grid-flush
  • In the examples the columns default to stacked, then side-by-side above the small breakpoint based on col widths.
  • Note the margin-bottom classes that apply only below the small breakpoint when columns are stacked.
<div className="grid">
    <div className="s_col-3 mb3 s_mb0">...content...</div>
    <div className="s_col-3 mb3 s_mb0">...content...</div>
    <div className="s_col-6">...content...</div>
</div>
<div className="grid grid-wide">
    <div className="s_col-3 mb3 s_mb0">...content...</div>
    <div className="s_col-3 mb3 s_mb0">...content...</div>
    <div className="s_col-6">...content...</div>
</div>
<div className="grid grid-flush">
    <div className="s_col-3 mb3 s_mb0">...content...</div>
    <div className="s_col-3 mb3 s_mb0">...content...</div>
    <div className="s_col-6">...content...</div>
</div>

Multi-row

Using multiple columns with a combined width that exceeds `12` will automatically wrap into new rows. In this example the columns are stacked by default, two per row above the small breakpoint, and three per row above the medium breakpoint.

<div class="grid">
    <div class="s_col-6 m_col-4"><div class="bg-gray-200 ba b-gray h3 mb3"></div></div>
    <div class="s_col-6 m_col-4"><div class="bg-gray-200 ba b-gray h3 mb3"></div></div>
    <div class="s_col-6 m_col-4"><div class="bg-gray-200 ba b-gray h3 mb3"></div></div>
    <div class="s_col-6 m_col-4"><div class="bg-gray-200 ba b-gray h3 mb3 m_mb0"></div></div>
    <div class="s_col-6 m_col-4"><div class="bg-gray-200 ba b-gray h3 mb3 s_mb0"></div></div>
    <div class="s_col-6 m_col-4"><div class="bg-gray-200 ba b-gray h3"></div></div>
</div>

Centered grid

Though this design pattern is often built using grid classes, it is more easily solved by using mw7 center tc.

“In our industry, you hear a lot of talk about the future of work. What I’ve come to believe — because I see it every day — is that the entrepreneurial spirit of independent professionals is the most precious resource we have as a society.” 
<div class="mw7 center tc">
    <div class="ba b-green">
        “In our industry, you hear a lot of talk about the future of work. What I’ve come to believe
        — because I see it every day — is that the entrepreneurial spirit of independent
        professionals is the most precious resource we have as a society.”
    </div>
</div>
grid
margin-left: -16px !important
display: flex !important
flex-wrap: wrap !important
padding-left: 16px !important
width: 100% !important
grid-wide
margin-left: -32px !important
padding-left: 32px !important
grid-flush
margin-left: 0 !important
padding-left: 0 !important
col-1
width: 8.333333% !important
col-2
width: 16.666666% !important
col-3
width: 25% !important
col-4
width: 33.333333% !important
col-5
width: 41.666666% !important
col-6
width: 50% !important
col-7
width: 58.333333% !important
col-8
width: 66.666666% !important
col-9
width: 75% !important
col-10
width: 83.333333% !important
col-11
width: 91.666666% !important
col-12
width: 100% !important
s_grid
margin-left: -16px !important
display: flex !important
flex-wrap: wrap !important
padding-left: 16px !important
width: 100% !important
s_grid-wide
margin-left: -32px !important
padding-left: 32px !important
s_grid-flush
margin-left: 0 !important
padding-left: 0 !important
s_col-1
width: 8.333333% !important
s_col-2
width: 16.666666% !important
s_col-3
width: 25% !important
s_col-4
width: 33.333333% !important
s_col-5
width: 41.666666% !important
s_col-6
width: 50% !important
s_col-7
width: 58.333333% !important
s_col-8
width: 66.666666% !important
s_col-9
width: 75% !important
s_col-10
width: 83.333333% !important
s_col-11
width: 91.666666% !important
s_col-12
width: 100% !important
m_grid
margin-left: -16px !important
display: flex !important
flex-wrap: wrap !important
padding-left: 16px !important
width: 100% !important
m_grid-wide
margin-left: -32px !important
padding-left: 32px !important
m_grid-flush
margin-left: 0 !important
padding-left: 0 !important
m_col-1
width: 8.333333% !important
m_col-2
width: 16.666666% !important
m_col-3
width: 25% !important
m_col-4
width: 33.333333% !important
m_col-5
width: 41.666666% !important
m_col-6
width: 50% !important
m_col-7
width: 58.333333% !important
m_col-8
width: 66.666666% !important
m_col-9
width: 75% !important
m_col-10
width: 83.333333% !important
m_col-11
width: 91.666666% !important
m_col-12
width: 100% !important
l_grid
margin-left: -16px !important
display: flex !important
flex-wrap: wrap !important
padding-left: 16px !important
width: 100% !important
l_grid-wide
margin-left: -32px !important
padding-left: 32px !important
l_grid-flush
margin-left: 0 !important
padding-left: 0 !important
l_col-1
width: 8.333333% !important
l_col-2
width: 16.666666% !important
l_col-3
width: 25% !important
l_col-4
width: 33.333333% !important
l_col-5
width: 41.666666% !important
l_col-6
width: 50% !important
l_col-7
width: 58.333333% !important
l_col-8
width: 66.666666% !important
l_col-9
width: 75% !important
l_col-10
width: 83.333333% !important
l_col-11
width: 91.666666% !important
l_col-12
width: 100% !important

Height

Options for setting fixed heights.

h1
h2
h3
h4
h5
h6
h0
height: 0 !important
h1
height: 16px !important
h2
height: 24px !important
h3
height: 32px !important
h4
height: 64px !important
h5
height: 128px !important
h6
height: 256px !important
h-0
height: 0 !important
h-25
height: 25% !important
h-50
height: 50% !important
h-75
height: 75% !important
h-100
height: 100% !important
min-h-100
min-height: 100% !important
vh-25
height: 25vh !important
vh-50
height: 50vh !important
vh-75
height: 75vh !important
vh-100
height: 100vh !important
min-vh-100
min-height: 100vh !important
h-auto
height: auto !important
h-inherit
height: inherit !important
s_h0
height: 0 !important
s_h1
height: 16px !important
s_h2
height: 24px !important
s_h3
height: 32px !important
s_h4
height: 64px !important
s_h5
height: 128px !important
s_h6
height: 256px !important
s_h-0
height: 0 !important
s_h-25
height: 25% !important
s_h-50
height: 50% !important
s_h-75
height: 75% !important
s_h-100
height: 100% !important
s_min-h-100
min-height: 100% !important
s_vh-25
height: 25vh !important
s_vh-50
height: 50vh !important
s_vh-75
height: 75vh !important
s_vh-100
height: 100vh !important
s_min-vh-100
min-height: 100vh !important
s_h-auto
height: auto !important
s_h-inherit
height: inherit !important
m_h0
height: 0 !important
m_h1
height: 16px !important
m_h2
height: 24px !important
m_h3
height: 32px !important
m_h4
height: 64px !important
m_h5
height: 128px !important
m_h6
height: 256px !important
m_h-0
height: 0 !important
m_h-25
height: 25% !important
m_h-50
height: 50% !important
m_h-75
height: 75% !important
m_h-100
height: 100% !important
m_min-h-100
min-height: 100% !important
m_vh-25
height: 25vh !important
m_vh-50
height: 50vh !important
m_vh-75
height: 75vh !important
m_vh-100
height: 100vh !important
m_min-vh-100
min-height: 100vh !important
m_h-auto
height: auto !important
m_h-inherit
height: inherit !important
l_h0
height: 0 !important
l_h1
height: 16px !important
l_h2
height: 24px !important
l_h3
height: 32px !important
l_h4
height: 64px !important
l_h5
height: 128px !important
l_h6
height: 256px !important
l_h-0
height: 0 !important
l_h-25
height: 25% !important
l_h-50
height: 50% !important
l_h-75
height: 75% !important
l_h-100
height: 100% !important
l_min-h-100
min-height: 100% !important
l_vh-25
height: 25vh !important
l_vh-50
height: 50vh !important
l_vh-75
height: 75vh !important
l_vh-100
height: 100vh !important
l_min-vh-100
min-height: 100vh !important
l_h-auto
height: auto !important
l_h-inherit
height: inherit !important

Margin

  • For setting positive, negative, and auto margins.
  • Spacing can be applied to individual sides, vertical, horizontal, or all sides.
ma0
margin: 0 !important
ma1
margin: 4px !important
ma2
margin: 8px !important
ma3
margin: 16px !important
ma4
margin: 24px !important
ma5
margin: 32px !important
ma6
margin: 64px !important
ma7
margin: 128px !important
ma8
margin: 256px !important
ml0
margin-left: 0 !important
ml1
margin-left: 4px !important
ml2
margin-left: 8px !important
ml3
margin-left: 16px !important
ml4
margin-left: 24px !important
ml5
margin-left: 32px !important
ml6
margin-left: 64px !important
ml7
margin-left: 128px !important
ml8
margin-left: 256px !important
mr0
margin-right: 0 !important
mr1
margin-right: 4px !important
mr2
margin-right: 8px !important
mr3
margin-right: 16px !important
mr4
margin-right: 24px !important
mr5
margin-right: 32px !important
mr6
margin-right: 64px !important
mr7
margin-right: 128px !important
mr8
margin-right: 256px !important
mb0
margin-bottom: 0 !important
mb1
margin-bottom: 4px !important
mb2
margin-bottom: 8px !important
mb3
margin-bottom: 16px !important
mb4
margin-bottom: 24px !important
mb5
margin-bottom: 32px !important
mb6
margin-bottom: 64px !important
mb7
margin-bottom: 128px !important
mb8
margin-bottom: 256px !important
mt0
margin-top: 0 !important
mt1
margin-top: 4px !important
mt2
margin-top: 8px !important
mt3
margin-top: 16px !important
mt4
margin-top: 24px !important
mt5
margin-top: 32px !important
mt6
margin-top: 64px !important
mt7
margin-top: 128px !important
mt8
margin-top: 256px !important
mv0
margin-top: 0 !important
margin-bottom: 0 !important
mv1
margin-top: 4px !important
margin-bottom: 4px !important
mv2
margin-top: 8px !important
margin-bottom: 8px !important
mv3
margin-top: 16px !important
margin-bottom: 16px !important
mv4
margin-top: 24px !important
margin-bottom: 24px !important
mv5
margin-top: 32px !important
margin-bottom: 32px !important
mv6
margin-top: 64px !important
margin-bottom: 64px !important
mv7
margin-top: 128px !important
margin-bottom: 128px !important
mv8
margin-top: 256px !important
margin-bottom: 256px !important
mh0
margin-left: 0 !important
margin-right: 0 !important
mh1
margin-left: 4px !important
margin-right: 4px !important
mh2
margin-left: 8px !important
margin-right: 8px !important
mh3
margin-left: 16px !important
margin-right: 16px !important
mh4
margin-left: 24px !important
margin-right: 24px !important
mh5
margin-left: 32px !important
margin-right: 32px !important
mh6
margin-left: 64px !important
margin-right: 64px !important
mh7
margin-left: 128px !important
margin-right: 128px !important
mh8
margin-left: 256px !important
margin-right: 256px !important
-ml1
margin-left: -4px !important
-ml2
margin-left: -8px !important
-ml3
margin-left: -16px !important
-ml4
margin-left: -24px !important
-ml5
margin-left: -32px !important
-ml6
margin-left: -64px !important
-ml7
margin-left: -128px !important
-ml8
margin-left: -256px !important
-mr1
margin-right: -4px !important
-mr2
margin-right: -8px !important
-mr3
margin-right: -16px !important
-mr4
margin-right: -24px !important
-mr5
margin-right: -32px !important
-mr6
margin-right: -64px !important
-mr7
margin-right: -128px !important
-mr8
margin-right: -256px !important
-mb1
margin-bottom: -4px !important
-mb2
margin-bottom: -8px !important
-mb3
margin-bottom: -16px !important
-mb4
margin-bottom: -24px !important
-mb5
margin-bottom: -32px !important
-mb6
margin-bottom: -64px !important
-mb7
margin-bottom: -128px !important
-mb8
margin-bottom: -256px !important
-mt1
margin-top: -4px !important
-mt2
margin-top: -8px !important
-mt3
margin-top: -16px !important
-mt4
margin-top: -24px !important
-mt5
margin-top: -32px !important
-mt6
margin-top: -64px !important
-mt7
margin-top: -128px !important
-mt8
margin-top: -256px !important
center
margin-right: auto !important
margin-left: auto !important
ma-auto
margin: auto !important
mr-auto
margin-right: auto !important
ml-auto
margin-left: auto !important
mt-auto
margin-top: auto !important
mb-auto
margin-bottom: auto !important
s_ma0
margin: 0 !important
s_ma1
margin: 4px !important
s_ma2
margin: 8px !important
s_ma3
margin: 16px !important
s_ma4
margin: 24px !important
s_ma5
margin: 32px !important
s_ma6
margin: 64px !important
s_ma7
margin: 128px !important
s_ma8
margin: 256px !important
s_ml0
margin-left: 0 !important
s_ml1
margin-left: 4px !important
s_ml2
margin-left: 8px !important
s_ml3
margin-left: 16px !important
s_ml4
margin-left: 24px !important
s_ml5
margin-left: 32px !important
s_ml6
margin-left: 64px !important
s_ml7
margin-left: 128px !important
s_ml8
margin-left: 256px !important
s_mr0
margin-right: 0 !important
s_mr1
margin-right: 4px !important
s_mr2
margin-right: 8px !important
s_mr3
margin-right: 16px !important
s_mr4
margin-right: 24px !important
s_mr5
margin-right: 32px !important
s_mr6
margin-right: 64px !important
s_mr7
margin-right: 128px !important
s_mr8
margin-right: 256px !important
s_mb0
margin-bottom: 0 !important
s_mb1
margin-bottom: 4px !important
s_mb2
margin-bottom: 8px !important
s_mb3
margin-bottom: 16px !important
s_mb4
margin-bottom: 24px !important
s_mb5
margin-bottom: 32px !important
s_mb6
margin-bottom: 64px !important
s_mb7
margin-bottom: 128px !important
s_mb8
margin-bottom: 256px !important
s_mt0
margin-top: 0 !important
s_mt1
margin-top: 4px !important
s_mt2
margin-top: 8px !important
s_mt3
margin-top: 16px !important
s_mt4
margin-top: 24px !important
s_mt5
margin-top: 32px !important
s_mt6
margin-top: 64px !important
s_mt7
margin-top: 128px !important
s_mt8
margin-top: 256px !important
s_mv0
margin-top: 0 !important
margin-bottom: 0 !important
s_mv1
margin-top: 4px !important
margin-bottom: 4px !important
s_mv2
margin-top: 8px !important
margin-bottom: 8px !important
s_mv3
margin-top: 16px !important
margin-bottom: 16px !important
s_mv4
margin-top: 24px !important
margin-bottom: 24px !important
s_mv5
margin-top: 32px !important
margin-bottom: 32px !important
s_mv6
margin-top: 64px !important
margin-bottom: 64px !important
s_mv7
margin-top: 128px !important
margin-bottom: 128px !important
s_mv8
margin-top: 256px !important
margin-bottom: 256px !important
s_mh0
margin-left: 0 !important
margin-right: 0 !important
s_mh1
margin-left: 4px !important
margin-right: 4px !important
s_mh2
margin-left: 8px !important
margin-right: 8px !important
s_mh3
margin-left: 16px !important
margin-right: 16px !important
s_mh4
margin-left: 24px !important
margin-right: 24px !important
s_mh5
margin-left: 32px !important
margin-right: 32px !important
s_mh6
margin-left: 64px !important
margin-right: 64px !important
s_mh7
margin-left: 128px !important
margin-right: 128px !important
s_mh8
margin-left: 256px !important
margin-right: 256px !important
s_-ml1
margin-left: -4px !important
s_-ml2
margin-left: -8px !important
s_-ml3
margin-left: -16px !important
s_-ml4
margin-left: -24px !important
s_-ml5
margin-left: -32px !important
s_-ml6
margin-left: -64px !important
s_-ml7
margin-left: -128px !important
s_-ml8
margin-left: -256px !important
s_-mr1
margin-right: -4px !important
s_-mr2
margin-right: -8px !important
s_-mr3
margin-right: -16px !important
s_-mr4
margin-right: -24px !important
s_-mr5
margin-right: -32px !important
s_-mr6
margin-right: -64px !important
s_-mr7
margin-right: -128px !important
s_-mr8
margin-right: -256px !important
s_-mb1
margin-bottom: -4px !important
s_-mb2
margin-bottom: -8px !important
s_-mb3
margin-bottom: -16px !important
s_-mb4
margin-bottom: -24px !important
s_-mb5
margin-bottom: -32px !important
s_-mb6
margin-bottom: -64px !important
s_-mb7
margin-bottom: -128px !important
s_-mb8
margin-bottom: -256px !important
s_-mt1
margin-top: -4px !important
s_-mt2
margin-top: -8px !important
s_-mt3
margin-top: -16px !important
s_-mt4
margin-top: -24px !important
s_-mt5
margin-top: -32px !important
s_-mt6
margin-top: -64px !important
s_-mt7
margin-top: -128px !important
s_-mt8
margin-top: -256px !important
s_center
margin-right: auto !important
margin-left: auto !important
s_ma-auto
margin: auto !important
s_mr-auto
margin-right: auto !important
s_ml-auto
margin-left: auto !important
s_mt-auto
margin-top: auto !important
s_mb-auto
margin-bottom: auto !important
m_ma0
margin: 0 !important
m_ma1
margin: 4px !important
m_ma2
margin: 8px !important
m_ma3
margin: 16px !important
m_ma4
margin: 24px !important
m_ma5
margin: 32px !important
m_ma6
margin: 64px !important
m_ma7
margin: 128px !important
m_ma8
margin: 256px !important
m_ml0
margin-left: 0 !important
m_ml1
margin-left: 4px !important
m_ml2
margin-left: 8px !important
m_ml3
margin-left: 16px !important
m_ml4
margin-left: 24px !important
m_ml5
margin-left: 32px !important
m_ml6
margin-left: 64px !important
m_ml7
margin-left: 128px !important
m_ml8
margin-left: 256px !important
m_mr0
margin-right: 0 !important
m_mr1
margin-right: 4px !important
m_mr2
margin-right: 8px !important
m_mr3
margin-right: 16px !important
m_mr4
margin-right: 24px !important
m_mr5
margin-right: 32px !important
m_mr6
margin-right: 64px !important
m_mr7
margin-right: 128px !important
m_mr8
margin-right: 256px !important
m_mb0
margin-bottom: 0 !important
m_mb1
margin-bottom: 4px !important
m_mb2
margin-bottom: 8px !important
m_mb3
margin-bottom: 16px !important
m_mb4
margin-bottom: 24px !important
m_mb5
margin-bottom: 32px !important
m_mb6
margin-bottom: 64px !important
m_mb7
margin-bottom: 128px !important
m_mb8
margin-bottom: 256px !important
m_mt0
margin-top: 0 !important
m_mt1
margin-top: 4px !important
m_mt2
margin-top: 8px !important
m_mt3
margin-top: 16px !important
m_mt4
margin-top: 24px !important
m_mt5
margin-top: 32px !important
m_mt6
margin-top: 64px !important
m_mt7
margin-top: 128px !important
m_mt8
margin-top: 256px !important
m_mv0
margin-top: 0 !important
margin-bottom: 0 !important
m_mv1
margin-top: 4px !important
margin-bottom: 4px !important
m_mv2
margin-top: 8px !important
margin-bottom: 8px !important
m_mv3
margin-top: 16px !important
margin-bottom: 16px !important
m_mv4
margin-top: 24px !important
margin-bottom: 24px !important
m_mv5
margin-top: 32px !important
margin-bottom: 32px !important
m_mv6
margin-top: 64px !important
margin-bottom: 64px !important
m_mv7
margin-top: 128px !important
margin-bottom: 128px !important
m_mv8
margin-top: 256px !important
margin-bottom: 256px !important
m_mh0
margin-left: 0 !important
margin-right: 0 !important
m_mh1
margin-left: 4px !important
margin-right: 4px !important
m_mh2
margin-left: 8px !important
margin-right: 8px !important
m_mh3
margin-left: 16px !important
margin-right: 16px !important
m_mh4
margin-left: 24px !important
margin-right: 24px !important
m_mh5
margin-left: 32px !important
margin-right: 32px !important
m_mh6
margin-left: 64px !important
margin-right: 64px !important
m_mh7
margin-left: 128px !important
margin-right: 128px !important
m_mh8
margin-left: 256px !important
margin-right: 256px !important
m_-ml1
margin-left: -4px !important
m_-ml2
margin-left: -8px !important
m_-ml3
margin-left: -16px !important
m_-ml4
margin-left: -24px !important
m_-ml5
margin-left: -32px !important
m_-ml6
margin-left: -64px !important
m_-ml7
margin-left: -128px !important
m_-ml8
margin-left: -256px !important
m_-mr1
margin-right: -4px !important
m_-mr2
margin-right: -8px !important
m_-mr3
margin-right: -16px !important
m_-mr4
margin-right: -24px !important
m_-mr5
margin-right: -32px !important
m_-mr6
margin-right: -64px !important
m_-mr7
margin-right: -128px !important
m_-mr8
margin-right: -256px !important
m_-mb1
margin-bottom: -4px !important
m_-mb2
margin-bottom: -8px !important
m_-mb3
margin-bottom: -16px !important
m_-mb4
margin-bottom: -24px !important
m_-mb5
margin-bottom: -32px !important
m_-mb6
margin-bottom: -64px !important
m_-mb7
margin-bottom: -128px !important
m_-mb8
margin-bottom: -256px !important
m_-mt1
margin-top: -4px !important
m_-mt2
margin-top: -8px !important
m_-mt3
margin-top: -16px !important
m_-mt4
margin-top: -24px !important
m_-mt5
margin-top: -32px !important
m_-mt6
margin-top: -64px !important
m_-mt7
margin-top: -128px !important
m_-mt8
margin-top: -256px !important
m_center
margin-right: auto !important
margin-left: auto !important
m_ma-auto
margin: auto !important
m_mr-auto
margin-right: auto !important
m_ml-auto
margin-left: auto !important
m_mt-auto
margin-top: auto !important
m_mb-auto
margin-bottom: auto !important
l_ma0
margin: 0 !important
l_ma1
margin: 4px !important
l_ma2
margin: 8px !important
l_ma3
margin: 16px !important
l_ma4
margin: 24px !important
l_ma5
margin: 32px !important
l_ma6
margin: 64px !important
l_ma7
margin: 128px !important
l_ma8
margin: 256px !important
l_ml0
margin-left: 0 !important
l_ml1
margin-left: 4px !important
l_ml2
margin-left: 8px !important
l_ml3
margin-left: 16px !important
l_ml4
margin-left: 24px !important
l_ml5
margin-left: 32px !important
l_ml6
margin-left: 64px !important
l_ml7
margin-left: 128px !important
l_ml8
margin-left: 256px !important
l_mr0
margin-right: 0 !important
l_mr1
margin-right: 4px !important
l_mr2
margin-right: 8px !important
l_mr3
margin-right: 16px !important
l_mr4
margin-right: 24px !important
l_mr5
margin-right: 32px !important
l_mr6
margin-right: 64px !important
l_mr7
margin-right: 128px !important
l_mr8
margin-right: 256px !important
l_mb0
margin-bottom: 0 !important
l_mb1
margin-bottom: 4px !important
l_mb2
margin-bottom: 8px !important
l_mb3
margin-bottom: 16px !important
l_mb4
margin-bottom: 24px !important
l_mb5
margin-bottom: 32px !important
l_mb6
margin-bottom: 64px !important
l_mb7
margin-bottom: 128px !important
l_mb8
margin-bottom: 256px !important
l_mt0
margin-top: 0 !important
l_mt1
margin-top: 4px !important
l_mt2
margin-top: 8px !important
l_mt3
margin-top: 16px !important
l_mt4
margin-top: 24px !important
l_mt5
margin-top: 32px !important
l_mt6
margin-top: 64px !important
l_mt7
margin-top: 128px !important
l_mt8
margin-top: 256px !important
l_mv0
margin-top: 0 !important
margin-bottom: 0 !important
l_mv1
margin-top: 4px !important
margin-bottom: 4px !important
l_mv2
margin-top: 8px !important
margin-bottom: 8px !important
l_mv3
margin-top: 16px !important
margin-bottom: 16px !important
l_mv4
margin-top: 24px !important
margin-bottom: 24px !important
l_mv5
margin-top: 32px !important
margin-bottom: 32px !important
l_mv6
margin-top: 64px !important
margin-bottom: 64px !important
l_mv7
margin-top: 128px !important
margin-bottom: 128px !important
l_mv8
margin-top: 256px !important
margin-bottom: 256px !important
l_mh0
margin-left: 0 !important
margin-right: 0 !important
l_mh1
margin-left: 4px !important
margin-right: 4px !important
l_mh2
margin-left: 8px !important
margin-right: 8px !important
l_mh3
margin-left: 16px !important
margin-right: 16px !important
l_mh4
margin-left: 24px !important
margin-right: 24px !important
l_mh5
margin-left: 32px !important
margin-right: 32px !important
l_mh6
margin-left: 64px !important
margin-right: 64px !important
l_mh7
margin-left: 128px !important
margin-right: 128px !important
l_mh8
margin-left: 256px !important
margin-right: 256px !important
l_-ml1
margin-left: -4px !important
l_-ml2
margin-left: -8px !important
l_-ml3
margin-left: -16px !important
l_-ml4
margin-left: -24px !important
l_-ml5
margin-left: -32px !important
l_-ml6
margin-left: -64px !important
l_-ml7
margin-left: -128px !important
l_-ml8
margin-left: -256px !important
l_-mr1
margin-right: -4px !important
l_-mr2
margin-right: -8px !important
l_-mr3
margin-right: -16px !important
l_-mr4
margin-right: -24px !important
l_-mr5
margin-right: -32px !important
l_-mr6
margin-right: -64px !important
l_-mr7
margin-right: -128px !important
l_-mr8
margin-right: -256px !important
l_-mb1
margin-bottom: -4px !important
l_-mb2
margin-bottom: -8px !important
l_-mb3
margin-bottom: -16px !important
l_-mb4
margin-bottom: -24px !important
l_-mb5
margin-bottom: -32px !important
l_-mb6
margin-bottom: -64px !important
l_-mb7
margin-bottom: -128px !important
l_-mb8
margin-bottom: -256px !important
l_-mt1
margin-top: -4px !important
l_-mt2
margin-top: -8px !important
l_-mt3
margin-top: -16px !important
l_-mt4
margin-top: -24px !important
l_-mt5
margin-top: -32px !important
l_-mt6
margin-top: -64px !important
l_-mt7
margin-top: -128px !important
l_-mt8
margin-top: -256px !important
l_center
margin-right: auto !important
margin-left: auto !important
l_ma-auto
margin: auto !important
l_mr-auto
margin-right: auto !important
l_ml-auto
margin-left: auto !important
l_mt-auto
margin-top: auto !important
l_mb-auto
margin-bottom: auto !important

Max Width

mw1
mw2
mw3
mw4
mw5
mw6
mw7
mw-100
max-width: 100% !important
mw1
max-width: 16px !important
mw2
max-width: 24px !important
mw3
max-width: 32px !important
mw4
max-width: 64px !important
mw5
max-width: 128px !important
mw6
max-width: 256px !important
mw7
max-width: 512px !important
mw8
max-width: 736px !important
mw9
max-width: 946px !important
mw-none
max-width: none !important
s_mw-100
max-width: 100% !important
s_mw1
max-width: 16px !important
s_mw2
max-width: 24px !important
s_mw3
max-width: 32px !important
s_mw4
max-width: 64px !important
s_mw5
max-width: 128px !important
s_mw6
max-width: 256px !important
s_mw7
max-width: 512px !important
s_mw8
max-width: 736px !important
s_mw9
max-width: 946px !important
s_mw-none
max-width: none !important
m_mw-100
max-width: 100% !important
m_mw1
max-width: 16px !important
m_mw2
max-width: 24px !important
m_mw3
max-width: 32px !important
m_mw4
max-width: 64px !important
m_mw5
max-width: 128px !important
m_mw6
max-width: 256px !important
m_mw7
max-width: 512px !important
m_mw8
max-width: 736px !important
m_mw9
max-width: 946px !important
m_mw-none
max-width: none !important
l_mw-100
max-width: 100% !important
l_mw1
max-width: 16px !important
l_mw2
max-width: 24px !important
l_mw3
max-width: 32px !important
l_mw4
max-width: 64px !important
l_mw5
max-width: 128px !important
l_mw6
max-width: 256px !important
l_mw7
max-width: 512px !important
l_mw8
max-width: 736px !important
l_mw9
max-width: 946px !important
l_mw-none
max-width: none !important

Overflow

overflow-visible
overflow: visible !important
overflow-hidden
overflow: hidden !important
overflow-scroll
overflow: scroll !important
overflow-auto
overflow: auto !important
overflow-x-visible
overflow-x: visible !important
overflow-x-hidden
overflow-x: hidden !important
overflow-x-scroll
overflow-x: scroll !important
overflow-x-auto
overflow-x: auto !important
overflow-y-visible
overflow-y: visible !important
overflow-y-hidden
overflow-y: hidden !important
overflow-y-scroll
overflow-y: scroll !important
overflow-y-auto
overflow-y: auto !important
s_overflow-visible
overflow: visible !important
s_overflow-hidden
overflow: hidden !important
s_overflow-scroll
overflow: scroll !important
s_overflow-auto
overflow: auto !important
s_overflow-x-visible
overflow-x: visible !important
s_overflow-x-hidden
overflow-x: hidden !important
s_overflow-x-scroll
overflow-x: scroll !important
s_overflow-x-auto
overflow-x: auto !important
s_overflow-y-visible
overflow-y: visible !important
s_overflow-y-hidden
overflow-y: hidden !important
s_overflow-y-scroll
overflow-y: scroll !important
s_overflow-y-auto
overflow-y: auto !important
m_overflow-visible
overflow: visible !important
m_overflow-hidden
overflow: hidden !important
m_overflow-scroll
overflow: scroll !important
m_overflow-auto
overflow: auto !important
m_overflow-x-visible
overflow-x: visible !important
m_overflow-x-hidden
overflow-x: hidden !important
m_overflow-x-scroll
overflow-x: scroll !important
m_overflow-x-auto
overflow-x: auto !important
m_overflow-y-visible
overflow-y: visible !important
m_overflow-y-hidden
overflow-y: hidden !important
m_overflow-y-scroll
overflow-y: scroll !important
m_overflow-y-auto
overflow-y: auto !important
l_overflow-visible
overflow: visible !important
l_overflow-hidden
overflow: hidden !important
l_overflow-scroll
overflow: scroll !important
l_overflow-auto
overflow: auto !important
l_overflow-x-visible
overflow-x: visible !important
l_overflow-x-hidden
overflow-x: hidden !important
l_overflow-x-scroll
overflow-x: scroll !important
l_overflow-x-auto
overflow-x: auto !important
l_overflow-y-visible
overflow-y: visible !important
l_overflow-y-hidden
overflow-y: hidden !important
l_overflow-y-scroll
overflow-y: scroll !important
l_overflow-y-auto
overflow-y: auto !important

Padding

  • For setting padding.
  • Spacing can be applied to individual sides, vertical, horizontal, or all sides.
pa0
padding: 0 !important
pa1
padding: 4px !important
pa2
padding: 8px !important
pa3
padding: 16px !important
pa4
padding: 24px !important
pa5
padding: 32px !important
pa6
padding: 64px !important
pa7
padding: 128px !important
pa8
padding: 256px !important
pl0
padding-left: 0 !important
pl1
padding-left: 4px !important
pl2
padding-left: 8px !important
pl3
padding-left: 16px !important
pl4
padding-left: 24px !important
pl5
padding-left: 32px !important
pl6
padding-left: 64px !important
pl7
padding-left: 128px !important
pl8
padding-left: 256px !important
pr0
padding-right: 0 !important
pr1
padding-right: 4px !important
pr2
padding-right: 8px !important
pr3
padding-right: 16px !important
pr4
padding-right: 24px !important
pr5
padding-right: 32px !important
pr6
padding-right: 64px !important
pr7
padding-right: 128px !important
pr8
padding-right: 256px !important
pb0
padding-bottom: 0 !important
pb1
padding-bottom: 4px !important
pb2
padding-bottom: 8px !important
pb3
padding-bottom: 16px !important
pb4
padding-bottom: 24px !important
pb5
padding-bottom: 32px !important
pb6
padding-bottom: 64px !important
pb7
padding-bottom: 128px !important
pb8
padding-bottom: 256px !important
pt0
padding-top: 0 !important
pt1
padding-top: 4px !important
pt2
padding-top: 8px !important
pt3
padding-top: 16px !important
pt4
padding-top: 24px !important
pt5
padding-top: 32px !important
pt6
padding-top: 64px !important
pt7
padding-top: 128px !important
pt8
padding-top: 256px !important
pv0
padding-top: 0 !important
padding-bottom: 0 !important
pv1
padding-top: 4px !important
padding-bottom: 4px !important
pv2
padding-top: 8px !important
padding-bottom: 8px !important
pv3
padding-top: 16px !important
padding-bottom: 16px !important
pv4
padding-top: 24px !important
padding-bottom: 24px !important
pv5
padding-top: 32px !important
padding-bottom: 32px !important
pv6
padding-top: 64px !important
padding-bottom: 64px !important
pv7
padding-top: 128px !important
padding-bottom: 128px !important
pv8
padding-top: 256px !important
padding-bottom: 256px !important
ph0
padding-left: 0 !important
padding-right: 0 !important
ph1
padding-left: 4px !important
padding-right: 4px !important
ph2
padding-left: 8px !important
padding-right: 8px !important
ph3
padding-left: 16px !important
padding-right: 16px !important
ph4
padding-left: 24px !important
padding-right: 24px !important
ph5
padding-left: 32px !important
padding-right: 32px !important
ph6
padding-left: 64px !important
padding-right: 64px !important
ph7
padding-left: 128px !important
padding-right: 128px !important
ph8
padding-left: 256px !important
padding-right: 256px !important
s_pa0
padding: 0 !important
s_pa1
padding: 4px !important
s_pa2
padding: 8px !important
s_pa3
padding: 16px !important
s_pa4
padding: 24px !important
s_pa5
padding: 32px !important
s_pa6
padding: 64px !important
s_pa7
padding: 128px !important
s_pa8
padding: 256px !important
s_pl0
padding-left: 0 !important
s_pl1
padding-left: 4px !important
s_pl2
padding-left: 8px !important
s_pl3
padding-left: 16px !important
s_pl4
padding-left: 24px !important
s_pl5
padding-left: 32px !important
s_pl6
padding-left: 64px !important
s_pl7
padding-left: 128px !important
s_pl8
padding-left: 256px !important
s_pr0
padding-right: 0 !important
s_pr1
padding-right: 4px !important
s_pr2
padding-right: 8px !important
s_pr3
padding-right: 16px !important
s_pr4
padding-right: 24px !important
s_pr5
padding-right: 32px !important
s_pr6
padding-right: 64px !important
s_pr7
padding-right: 128px !important
s_pr8
padding-right: 256px !important
s_pb0
padding-bottom: 0 !important
s_pb1
padding-bottom: 4px !important
s_pb2
padding-bottom: 8px !important
s_pb3
padding-bottom: 16px !important
s_pb4
padding-bottom: 24px !important
s_pb5
padding-bottom: 32px !important
s_pb6
padding-bottom: 64px !important
s_pb7
padding-bottom: 128px !important
s_pb8
padding-bottom: 256px !important
s_pt0
padding-top: 0 !important
s_pt1
padding-top: 4px !important
s_pt2
padding-top: 8px !important
s_pt3
padding-top: 16px !important
s_pt4
padding-top: 24px !important
s_pt5
padding-top: 32px !important
s_pt6
padding-top: 64px !important
s_pt7
padding-top: 128px !important
s_pt8
padding-top: 256px !important
s_pv0
padding-top: 0 !important
padding-bottom: 0 !important
s_pv1
padding-top: 4px !important
padding-bottom: 4px !important
s_pv2
padding-top: 8px !important
padding-bottom: 8px !important
s_pv3
padding-top: 16px !important
padding-bottom: 16px !important
s_pv4
padding-top: 24px !important
padding-bottom: 24px !important
s_pv5
padding-top: 32px !important
padding-bottom: 32px !important
s_pv6
padding-top: 64px !important
padding-bottom: 64px !important
s_pv7
padding-top: 128px !important
padding-bottom: 128px !important
s_pv8
padding-top: 256px !important
padding-bottom: 256px !important
s_ph0
padding-left: 0 !important
padding-right: 0 !important
s_ph1
padding-left: 4px !important
padding-right: 4px !important
s_ph2
padding-left: 8px !important
padding-right: 8px !important
s_ph3
padding-left: 16px !important
padding-right: 16px !important
s_ph4
padding-left: 24px !important
padding-right: 24px !important
s_ph5
padding-left: 32px !important
padding-right: 32px !important
s_ph6
padding-left: 64px !important
padding-right: 64px !important
s_ph7
padding-left: 128px !important
padding-right: 128px !important
s_ph8
padding-left: 256px !important
padding-right: 256px !important
m_pa0
padding: 0 !important
m_pa1
padding: 4px !important
m_pa2
padding: 8px !important
m_pa3
padding: 16px !important
m_pa4
padding: 24px !important
m_pa5
padding: 32px !important
m_pa6
padding: 64px !important
m_pa7
padding: 128px !important
m_pa8
padding: 256px !important
m_pl0
padding-left: 0 !important
m_pl1
padding-left: 4px !important
m_pl2
padding-left: 8px !important
m_pl3
padding-left: 16px !important
m_pl4
padding-left: 24px !important
m_pl5
padding-left: 32px !important
m_pl6
padding-left: 64px !important
m_pl7
padding-left: 128px !important
m_pl8
padding-left: 256px !important
m_pr0
padding-right: 0 !important
m_pr1
padding-right: 4px !important
m_pr2
padding-right: 8px !important
m_pr3
padding-right: 16px !important
m_pr4
padding-right: 24px !important
m_pr5
padding-right: 32px !important
m_pr6
padding-right: 64px !important
m_pr7
padding-right: 128px !important
m_pr8
padding-right: 256px !important
m_pb0
padding-bottom: 0 !important
m_pb1
padding-bottom: 4px !important
m_pb2
padding-bottom: 8px !important
m_pb3
padding-bottom: 16px !important
m_pb4
padding-bottom: 24px !important
m_pb5
padding-bottom: 32px !important
m_pb6
padding-bottom: 64px !important
m_pb7
padding-bottom: 128px !important
m_pb8
padding-bottom: 256px !important
m_pt0
padding-top: 0 !important
m_pt1
padding-top: 4px !important
m_pt2
padding-top: 8px !important
m_pt3
padding-top: 16px !important
m_pt4
padding-top: 24px !important
m_pt5
padding-top: 32px !important
m_pt6
padding-top: 64px !important
m_pt7
padding-top: 128px !important
m_pt8
padding-top: 256px !important
m_pv0
padding-top: 0 !important
padding-bottom: 0 !important
m_pv1
padding-top: 4px !important
padding-bottom: 4px !important
m_pv2
padding-top: 8px !important
padding-bottom: 8px !important
m_pv3
padding-top: 16px !important
padding-bottom: 16px !important
m_pv4
padding-top: 24px !important
padding-bottom: 24px !important
m_pv5
padding-top: 32px !important
padding-bottom: 32px !important
m_pv6
padding-top: 64px !important
padding-bottom: 64px !important
m_pv7
padding-top: 128px !important
padding-bottom: 128px !important
m_pv8
padding-top: 256px !important
padding-bottom: 256px !important
m_ph0
padding-left: 0 !important
padding-right: 0 !important
m_ph1
padding-left: 4px !important
padding-right: 4px !important
m_ph2
padding-left: 8px !important
padding-right: 8px !important
m_ph3
padding-left: 16px !important
padding-right: 16px !important
m_ph4
padding-left: 24px !important
padding-right: 24px !important
m_ph5
padding-left: 32px !important
padding-right: 32px !important
m_ph6
padding-left: 64px !important
padding-right: 64px !important
m_ph7
padding-left: 128px !important
padding-right: 128px !important
m_ph8
padding-left: 256px !important
padding-right: 256px !important
l_pa0
padding: 0 !important
l_pa1
padding: 4px !important
l_pa2
padding: 8px !important
l_pa3
padding: 16px !important
l_pa4
padding: 24px !important
l_pa5
padding: 32px !important
l_pa6
padding: 64px !important
l_pa7
padding: 128px !important
l_pa8
padding: 256px !important
l_pl0
padding-left: 0 !important
l_pl1
padding-left: 4px !important
l_pl2
padding-left: 8px !important
l_pl3
padding-left: 16px !important
l_pl4
padding-left: 24px !important
l_pl5
padding-left: 32px !important
l_pl6
padding-left: 64px !important
l_pl7
padding-left: 128px !important
l_pl8
padding-left: 256px !important
l_pr0
padding-right: 0 !important
l_pr1
padding-right: 4px !important
l_pr2
padding-right: 8px !important
l_pr3
padding-right: 16px !important
l_pr4
padding-right: 24px !important
l_pr5
padding-right: 32px !important
l_pr6
padding-right: 64px !important
l_pr7
padding-right: 128px !important
l_pr8
padding-right: 256px !important
l_pb0
padding-bottom: 0 !important
l_pb1
padding-bottom: 4px !important
l_pb2
padding-bottom: 8px !important
l_pb3
padding-bottom: 16px !important
l_pb4
padding-bottom: 24px !important
l_pb5
padding-bottom: 32px !important
l_pb6
padding-bottom: 64px !important
l_pb7
padding-bottom: 128px !important
l_pb8
padding-bottom: 256px !important
l_pt0
padding-top: 0 !important
l_pt1
padding-top: 4px !important
l_pt2
padding-top: 8px !important
l_pt3
padding-top: 16px !important
l_pt4
padding-top: 24px !important
l_pt5
padding-top: 32px !important
l_pt6
padding-top: 64px !important
l_pt7
padding-top: 128px !important
l_pt8
padding-top: 256px !important
l_pv0
padding-top: 0 !important
padding-bottom: 0 !important
l_pv1
padding-top: 4px !important
padding-bottom: 4px !important
l_pv2
padding-top: 8px !important
padding-bottom: 8px !important
l_pv3
padding-top: 16px !important
padding-bottom: 16px !important
l_pv4
padding-top: 24px !important
padding-bottom: 24px !important
l_pv5
padding-top: 32px !important
padding-bottom: 32px !important
l_pv6
padding-top: 64px !important
padding-bottom: 64px !important
l_pv7
padding-top: 128px !important
padding-bottom: 128px !important
l_pv8
padding-top: 256px !important
padding-bottom: 256px !important
l_ph0
padding-left: 0 !important
padding-right: 0 !important
l_ph1
padding-left: 4px !important
padding-right: 4px !important
l_ph2
padding-left: 8px !important
padding-right: 8px !important
l_ph3
padding-left: 16px !important
padding-right: 16px !important
l_ph4
padding-left: 24px !important
padding-right: 24px !important
l_ph5
padding-left: 32px !important
padding-right: 32px !important
l_ph6
padding-left: 64px !important
padding-right: 64px !important
l_ph7
padding-left: 128px !important
padding-right: 128px !important
l_ph8
padding-left: 256px !important
padding-right: 256px !important

Position

static
position: static !important
relative
position: relative !important
absolute
position: absolute !important
fixed
position: fixed !important
s_static
position: static !important
s_relative
position: relative !important
s_absolute
position: absolute !important
s_fixed
position: fixed !important
m_static
position: static !important
m_relative
position: relative !important
m_absolute
position: absolute !important
m_fixed
position: fixed !important
l_static
position: static !important
l_relative
position: relative !important
l_absolute
position: absolute !important
l_fixed
position: fixed !important

Text Align

I’m aligned left
tl
I’m aligned center
tc
I’m aligned right
tr
tl
text-align: left !important
tr
text-align: right !important
tc
text-align: center !important
tj
text-align: justify !important
s_tl
text-align: left !important
s_tr
text-align: right !important
s_tc
text-align: center !important
s_tj
text-align: justify !important
m_tl
text-align: left !important
m_tr
text-align: right !important
m_tc
text-align: center !important
m_tj
text-align: justify !important
l_tl
text-align: left !important
l_tr
text-align: right !important
l_tc
text-align: center !important
l_tj
text-align: justify !important

Text Decoration

Strikethrough
strike
Underlined
underline
strike
text-decoration: line-through !important
underline
text-decoration: underline !important
no-underline
text-decoration: none !important
s_strike
text-decoration: line-through !important
s_underline
text-decoration: underline !important
s_no-underline
text-decoration: none !important
m_strike
text-decoration: line-through !important
m_underline
text-decoration: underline !important
m_no-underline
text-decoration: none !important
l_strike
text-decoration: line-through !important
l_underline
text-decoration: underline !important
l_no-underline
text-decoration: none !important

Text Transform

Manipulate case of text.

capitalize
ttc
Lowercase
ttl
uppercase
ttu
ttc
text-transform: capitalize !important
ttl
text-transform: lowercase !important
ttu
text-transform: uppercase !important
ttn
text-transform: none !important
s_ttc
text-transform: capitalize !important
s_ttl
text-transform: lowercase !important
s_ttu
text-transform: uppercase !important
s_ttn
text-transform: none !important
m_ttc
text-transform: capitalize !important
m_ttl
text-transform: lowercase !important
m_ttu
text-transform: uppercase !important
m_ttn
text-transform: none !important
l_ttc
text-transform: capitalize !important
l_ttl
text-transform: lowercase !important
l_ttu
text-transform: uppercase !important
l_ttn
text-transform: none !important

Truncate

Single-line truncation.

  • An ellipsis will show only on Webkit browsers, like Safari and Chrome.
  • Truncating to two or more lines requires custom CSS.
In the era of instant-everything, it’s crazy that you still have to waste an entire afternoon researching, calling and comparing local pros whenever you need one.
Hi, good to meet you. When do you think we could set up the meeting to decide the needs of the conference?
Jun 21
<div class="truncate mb3 b">
    In the era of instant-everything, it’s crazy that you still have to waste an entire afternoon
    researching, calling and comparing local pros whenever you need one.
</div>


<div class="flex">
    <div class="truncate flex-auto">
        Hi, good to meet you. When do you think we could set up the meeting to decide the needs of
        the conference?
    </div>
    <div class="nowrap b ml2">Jun 21</div>
</div>

In the second example the we use a flex container and a nowrap to prevent the date from wrapping.

truncate
white-space: nowrap !important
overflow: hidden !important
text-overflow: ellipsis !important
s_truncate
white-space: nowrap !important
overflow: hidden !important
text-overflow: ellipsis !important
m_truncate
white-space: nowrap !important
overflow: hidden !important
text-overflow: ellipsis !important
l_truncate
white-space: nowrap !important
overflow: hidden !important
text-overflow: ellipsis !important

Vertical Align

v-base
vertical-align: baseline !important
v-mid
vertical-align: middle !important
v-top
vertical-align: top !important
v-btm
vertical-align: bottom !important
s_v-base
vertical-align: baseline !important
s_v-mid
vertical-align: middle !important
s_v-top
vertical-align: top !important
s_v-btm
vertical-align: bottom !important
m_v-base
vertical-align: baseline !important
m_v-mid
vertical-align: middle !important
m_v-top
vertical-align: top !important
m_v-btm
vertical-align: bottom !important
l_v-base
vertical-align: baseline !important
l_v-mid
vertical-align: middle !important
l_v-top
vertical-align: top !important
l_v-btm
vertical-align: bottom !important

Visually Hidden

Text that is hidden but accessible.

visually-hidden
position: fixed !important
clip: rect(1px, 1px, 1px, 1px) !important
s_visually-hidden
position: fixed !important
clip: rect(1px, 1px, 1px, 1px) !important
m_visually-hidden
position: fixed !important
clip: rect(1px, 1px, 1px, 1px) !important
l_visually-hidden
position: fixed !important
clip: rect(1px, 1px, 1px, 1px) !important

White Space

Control how text wraps.

  • nowrap: Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br&rt; tag is encountered.
  • pre: Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre&rt; tag in HTML.
ws-normal
white-space: normal !important
nowrap
white-space: nowrap !important
pre
white-space: pre !important
pre-line
white-space: pre-line !important
s_ws-normal
white-space: normal !important
s_nowrap
white-space: nowrap !important
s_pre
white-space: pre !important
s_pre-line
white-space: pre-line !important
m_ws-normal
white-space: normal !important
m_nowrap
white-space: nowrap !important
m_pre
white-space: pre !important
m_pre-line
white-space: pre-line !important
l_ws-normal
white-space: normal !important
l_nowrap
white-space: nowrap !important
l_pre
white-space: pre !important
l_pre-line
white-space: pre-line !important

Width

  • Fixed and percentage widths.
w1
w2
w3
w4
w5
w6
w1
width: 16px !important
w2
width: 24px !important
w3
width: 32px !important
w4
width: 64px !important
w5
width: 128px !important
w6
width: 256px !important
w-10
width: 10% !important
w-20
width: 20% !important
w-25
width: 25% !important
w-30
width: 30% !important
w-33
width: 33.333333% !important
w-40
width: 40% !important
w-50
width: 50% !important
w-60
width: 60% !important
w-66
width: 66.666666% !important
w-70
width: 70% !important
w-75
width: 75% !important
w-80
width: 80% !important
w-90
width: 90% !important
w-100
width: 100% !important
w-auto
width: auto !important
s_w1
width: 16px !important
s_w2
width: 24px !important
s_w3
width: 32px !important
s_w4
width: 64px !important
s_w5
width: 128px !important
s_w6
width: 256px !important
s_w-10
width: 10% !important
s_w-20
width: 20% !important
s_w-25
width: 25% !important
s_w-30
width: 30% !important
s_w-33
width: 33.333333% !important
s_w-40
width: 40% !important
s_w-50
width: 50% !important
s_w-60
width: 60% !important
s_w-66
width: 66.666666% !important
s_w-70
width: 70% !important
s_w-75
width: 75% !important
s_w-80
width: 80% !important
s_w-90
width: 90% !important
s_w-100
width: 100% !important
s_w-auto
width: auto !important
m_w1
width: 16px !important
m_w2
width: 24px !important
m_w3
width: 32px !important
m_w4
width: 64px !important
m_w5
width: 128px !important
m_w6
width: 256px !important
m_w-10
width: 10% !important
m_w-20
width: 20% !important
m_w-25
width: 25% !important
m_w-30
width: 30% !important
m_w-33
width: 33.333333% !important
m_w-40
width: 40% !important
m_w-50
width: 50% !important
m_w-60
width: 60% !important
m_w-66
width: 66.666666% !important
m_w-70
width: 70% !important
m_w-75
width: 75% !important
m_w-80
width: 80% !important
m_w-90
width: 90% !important
m_w-100
width: 100% !important
m_w-auto
width: auto !important
l_w1
width: 16px !important
l_w2
width: 24px !important
l_w3
width: 32px !important
l_w4
width: 64px !important
l_w5
width: 128px !important
l_w6
width: 256px !important
l_w-10
width: 10% !important
l_w-20
width: 20% !important
l_w-25
width: 25% !important
l_w-30
width: 30% !important
l_w-33
width: 33.333333% !important
l_w-40
width: 40% !important
l_w-50
width: 50% !important
l_w-60
width: 60% !important
l_w-66
width: 66.666666% !important
l_w-70
width: 70% !important
l_w-75
width: 75% !important
l_w-80
width: 80% !important
l_w-90
width: 90% !important
l_w-100
width: 100% !important
l_w-auto
width: auto !important

Word Break

  • word-wrap: To prevent overflow, word may be broken at any character.
  • word-nowrap: Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as value “normal”.
word-normal
word-break: normal !important
word-wrap
word-break: break-all !important
word-nowrap
word-break: keep-all !important
s_word-normal
word-break: normal !important
s_word-wrap
word-break: break-all !important
s_word-nowrap
word-break: keep-all !important
m_word-normal
word-break: normal !important
m_word-wrap
word-break: break-all !important
m_word-nowrap
word-break: keep-all !important
l_word-normal
word-break: normal !important
l_word-wrap
word-break: break-all !important
l_word-nowrap
word-break: keep-all !important

Z-Index

Use only in rare situations to change stacking order within components.

z-0
z-index: 0 !important
z-1
z-index: 1 !important
z-2
z-index: 2 !important
z-3
z-index: 3 !important
z-4
z-index: 4 !important
z-5
z-index: 5 !important
z-inherit
z-index: inherit !important
z-initial
z-index: initial !important
z-unset
z-index: unset !important