Thumbprint logo

Atomic

CSS classes for composing layouts

Version:4.4.0 •View source•Changelog•Report issue
Install:yarn add @thumbtack/thumbprint-atomic

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
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 Mark 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;