Atomic

Atomic

CSS classes for composing layouts.

Version:3.3.1 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-atomic

Aspect Ratio

  • Available ratios are 16:9, 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
16:9
7:3
8:5

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-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: #a97ff0 !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-100
shadow-100
shadow-100
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.
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: #a97ff0 !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;
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-indigo
background-color: #5968e2 !important;
bg-purple
background-color: #a97ff0 !important;
bg-green
background-color: #2db783 !important;
bg-yellow
background-color: #febe14 !important;
bg-red
background-color: #ff5a5f !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: #a97ff0 !important;
color: #a97ff0 !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: #a97ff0 !important;
background-color: #a97ff0 !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;

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;

Font Weight

  • Our Mark font only supports two weights: 400 and 700.
  • Use only when Type components 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 SCSS grid. 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;
-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;
-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_-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_-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_-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_-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_-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_-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