Padding
Padding helper classes help add a specific padding value to an element. These padding classes are based on a specific spacing scale which will help make spacing consistent across your product. You can even combine different padding classes together into an element.
Padding all
padding-all-small
padding-all-normal
padding-all-large
padding-all-xlarge
padding-all-jumbo
<div class="padding-all-small">...</div>
<div class="padding-all-normal">...</div>
<div class="padding-all-large">...</div>
<div class="padding-all-xlarge">...</div>
<div class="padding-all-jumbo">...</div>
Padding top
padding-top-small
padding-top-normal
padding-top-large
padding-top-xlarge
padding-top-jumbo
<div class="padding-top-small">...</div>
<div class="padding-top-normal">...</div>
<div class="padding-top-large">...</div>
<div class="padding-top-xlarge">...</div>
<div class="padding-top-jumbo">...</div>
Padding right
padding-right-small
padding-right-normal
padding-right-large
padding-right-xlarge
padding-right-jumbo
<div class="padding-right-small">...</div>
<div class="padding-right-normal">...</div>
<div class="padding-right-large">...</div>
<div class="padding-right-xlarge">...</div>
<div class="padding-right-jumbo">...</div>
Padding bottom
padding-bottom-small
padding-bottom-normal
padding-bottom-large
padding-bottom-xlarge
padding-bottom-jumbo
<div class="padding-bottom-small">...</div>
<div class="padding-bottom-normal">...</div>
<div class="padding-bottom-large">...</div>
<div class="padding-bottom-xlarge">...</div>
<div class="padding-bottom-jumbo">...</div>
Padding left
padding-left-small
padding-left-normal
padding-left-large
padding-left-xlarge
padding-left-jumbo
<div class="padding-left-small">...</div>
<div class="padding-left-normal">...</div>
<div class="padding-left-large">...</div>
<div class="padding-left-xlarge">...</div>
<div class="padding-left-jumbo">...</div>
Padding horizontal
padding-horizontal-small
padding-horizontal-normal
padding-horizontal-large
padding-horizontal-xlarge
padding-horizontal-jumbo
<div class="padding-horizontal-small">...</div>
<div class="padding-horizontal-normal">...</div>
<div class="padding-horizontal-large">...</div>
<div class="padding-horizontal-xlarge">...</div>
<div class="padding-horizontal-jumbo">...</div>
Padding vertical
padding-vertical-small
padding-vertical-normal
padding-vertical-large
padding-vertical-xlarge
padding-vertical-jumbo
<div class="padding-vertical-small">...</div>
<div class="padding-vertical-normal">...</div>
<div class="padding-vertical-large">...</div>
<div class="padding-vertical-xlarge">...</div>
<div class="padding-vertical-jumbo">...</div>
Padding Reset
You can use padding-*-0 to reset the padding
<div class="padding-top-0"></div>
<div class="padding-right-0"></div>
<div class="padding-bottom-0"></div>
<div class="padding-left-0"></div>
<div class="padding-horizontal-0"></div>
<div class="padding-vertical-0"></div>