Padding utility classes allow authors to apply paddings to any element at specific screen sizes.
Used to apply specific padding to any element or component.
N/A
<div class="u-pad-t-0">u-pad-t-0</div>
<div class="u-pad-t-h">u-pad-t-h</div>
<div class="u-pad-t-1">u-pad-t-1</div>
<div class="u-pad-t-2">u-pad-t-2</div>
<div class="u-pad-t-3">u-pad-t-3</div>
<div class="u-pad-t-4">u-pad-t-4</div>
<div class="u-pad-t-5">u-pad-t-5</div>
<div class="u-pad-t-0-xs">u-pad-t-0-xs</div>
<div class="u-pad-t-h-xs">u-pad-t-h-xs</div>
<div class="u-pad-t-1-xs">u-pad-t-1-xs</div>
<div class="u-pad-t-2-xs">u-pad-t-2-xs</div>
<div class="u-pad-t-3-xs">u-pad-t-3-xs</div>
<div class="u-pad-t-4-xs">u-pad-t-4-xs</div>
<div class="u-pad-t-5-xs">u-pad-t-5-xs</div>
<div class="u-pad-t-0-sm">u-pad-t-0-sm</div>
<div class="u-pad-t-h-sm">u-pad-t-h-sm</div>
<div class="u-pad-t-1-sm">u-pad-t-1-sm</div>
<div class="u-pad-t-2-sm">u-pad-t-2-sm</div>
<div class="u-pad-t-3-sm">u-pad-t-3-sm</div>
<div class="u-pad-t-4-sm">u-pad-t-4-sm</div>
<div class="u-pad-t-5-sm">u-pad-t-5-sm</div>
<div class="u-pad-t-0-md">u-pad-t-0-md</div>
<div class="u-pad-t-h-md">u-pad-t-h-md</div>
<div class="u-pad-t-1-md">u-pad-t-1-md</div>
<div class="u-pad-t-2-md">u-pad-t-2-md</div>
<div class="u-pad-t-3-md">u-pad-t-3-md</div>
<div class="u-pad-t-4-md">u-pad-t-4-md</div>
<div class="u-pad-t-5-md">u-pad-t-5-md</div>
<div class="u-pad-t-0-lg">u-pad-t-0-lg</div>
<div class="u-pad-t-h-lg">u-pad-t-h-lg</div>
<div class="u-pad-t-1-lg">u-pad-t-1-lg</div>
<div class="u-pad-t-2-lg">u-pad-t-2-lg</div>
<div class="u-pad-t-3-lg">u-pad-t-3-lg</div>
<div class="u-pad-t-4-lg">u-pad-t-4-lg</div>
<div class="u-pad-t-5-lg">u-pad-t-5-lg</div>
<div class="u-pad-r-0">u-pad-r-0</div>
<div class="u-pad-r-h">u-pad-r-h</div>
<div class="u-pad-r-1">u-pad-r-1</div>
<div class="u-pad-r-2">u-pad-r-2</div>
<div class="u-pad-r-3">u-pad-r-3</div>
<div class="u-pad-r-4">u-pad-r-4</div>
<div class="u-pad-r-5">u-pad-r-5</div>
<div class="u-pad-r-0-xs">u-pad-r-0-xs</div>
<div class="u-pad-r-h-xs">u-pad-r-h-xs</div>
<div class="u-pad-r-1-xs">u-pad-r-1-xs</div>
<div class="u-pad-r-2-xs">u-pad-r-2-xs</div>
<div class="u-pad-r-3-xs">u-pad-r-3-xs</div>
<div class="u-pad-r-4-xs">u-pad-r-4-xs</div>
<div class="u-pad-r-5-xs">u-pad-r-5-xs</div>
<div class="u-pad-r-0-sm">u-pad-r-0-sm</div>
<div class="u-pad-r-h-sm">u-pad-r-h-sm</div>
<div class="u-pad-r-1-sm">u-pad-r-1-sm</div>
<div class="u-pad-r-2-sm">u-pad-r-2-sm</div>
<div class="u-pad-r-3-sm">u-pad-r-3-sm</div>
<div class="u-pad-r-4-sm">u-pad-r-4-sm</div>
<div class="u-pad-r-5-sm">u-pad-r-5-sm</div>
<div class="u-pad-r-0-md">u-pad-r-0-md</div>
<div class="u-pad-r-h-md">u-pad-r-h-md</div>
<div class="u-pad-r-1-md">u-pad-r-1-md</div>
<div class="u-pad-r-2-md">u-pad-r-2-md</div>
<div class="u-pad-r-3-md">u-pad-r-3-md</div>
<div class="u-pad-r-4-md">u-pad-r-4-md</div>
<div class="u-pad-r-5-md">u-pad-r-5-md</div>
<div class="u-pad-r-0-lg">u-pad-r-0-lg</div>
<div class="u-pad-r-h-lg">u-pad-r-h-lg</div>
<div class="u-pad-r-1-lg">u-pad-r-1-lg</div>
<div class="u-pad-r-2-lg">u-pad-r-2-lg</div>
<div class="u-pad-r-3-lg">u-pad-r-3-lg</div>
<div class="u-pad-r-4-lg">u-pad-r-4-lg</div>
<div class="u-pad-r-5-lg">u-pad-r-5-lg</div>
<div class="u-pad-b-0">u-pad-b-0</div>
<div class="u-pad-b-h">u-pad-b-h</div>
<div class="u-pad-b-1">u-pad-b-1</div>
<div class="u-pad-b-2">u-pad-b-2</div>
<div class="u-pad-b-3">u-pad-b-3</div>
<div class="u-pad-b-4">u-pad-b-4</div>
<div class="u-pad-b-5">u-pad-b-5</div>
<div class="u-pad-b-0-xs">u-pad-b-0-xs</div>
<div class="u-pad-b-h-xs">u-pad-b-h-xs</div>
<div class="u-pad-b-1-xs">u-pad-b-1-xs</div>
<div class="u-pad-b-2-xs">u-pad-b-2-xs</div>
<div class="u-pad-b-3-xs">u-pad-b-3-xs</div>
<div class="u-pad-b-4-xs">u-pad-b-4-xs</div>
<div class="u-pad-b-5-xs">u-pad-b-5-xs</div>
<div class="u-pad-b-0-sm">u-pad-b-0-sm</div>
<div class="u-pad-b-h-sm">u-pad-b-h-sm</div>
<div class="u-pad-b-1-sm">u-pad-b-1-sm</div>
<div class="u-pad-b-2-sm">u-pad-b-2-sm</div>
<div class="u-pad-b-3-sm">u-pad-b-3-sm</div>
<div class="u-pad-b-4-sm">u-pad-b-4-sm</div>
<div class="u-pad-b-5-sm">u-pad-b-5-sm</div>
<div class="u-pad-b-0-md">u-pad-b-0-md</div>
<div class="u-pad-b-h-md">u-pad-b-h-md</div>
<div class="u-pad-b-1-md">u-pad-b-1-md</div>
<div class="u-pad-b-2-md">u-pad-b-2-md</div>
<div class="u-pad-b-3-md">u-pad-b-3-md</div>
<div class="u-pad-b-4-md">u-pad-b-4-md</div>
<div class="u-pad-b-5-md">u-pad-b-5-md</div>
<div class="u-pad-b-0-lg">u-pad-b-0-lg</div>
<div class="u-pad-b-h-lg">u-pad-b-h-lg</div>
<div class="u-pad-b-1-lg">u-pad-b-1-lg</div>
<div class="u-pad-b-2-lg">u-pad-b-2-lg</div>
<div class="u-pad-b-3-lg">u-pad-b-3-lg</div>
<div class="u-pad-b-4-lg">u-pad-b-4-lg</div>
<div class="u-pad-b-5-lg">u-pad-b-5-lg</div>
<div class="u-pad-l-0">u-pad-l-0</div>
<div class="u-pad-l-h">u-pad-l-h</div>
<div class="u-pad-l-1">u-pad-l-1</div>
<div class="u-pad-l-2">u-pad-l-2</div>
<div class="u-pad-l-3">u-pad-l-3</div>
<div class="u-pad-l-4">u-pad-l-4</div>
<div class="u-pad-l-5">u-pad-l-5</div>
<div class="u-pad-l-0-xs">u-pad-l-0-xs</div>
<div class="u-pad-l-h-xs">u-pad-l-h-xs</div>
<div class="u-pad-l-1-xs">u-pad-l-1-xs</div>
<div class="u-pad-l-2-xs">u-pad-l-2-xs</div>
<div class="u-pad-l-3-xs">u-pad-l-3-xs</div>
<div class="u-pad-l-4-xs">u-pad-l-4-xs</div>
<div class="u-pad-l-5-xs">u-pad-l-5-xs</div>
<div class="u-pad-l-0-sm">u-pad-l-0-sm</div>
<div class="u-pad-l-h-sm">u-pad-l-h-sm</div>
<div class="u-pad-l-1-sm">u-pad-l-1-sm</div>
<div class="u-pad-l-2-sm">u-pad-l-2-sm</div>
<div class="u-pad-l-3-sm">u-pad-l-3-sm</div>
<div class="u-pad-l-4-sm">u-pad-l-4-sm</div>
<div class="u-pad-l-5-sm">u-pad-l-5-sm</div>
<div class="u-pad-l-0-md">u-pad-l-0-md</div>
<div class="u-pad-l-h-md">u-pad-l-h-md</div>
<div class="u-pad-l-1-md">u-pad-l-1-md</div>
<div class="u-pad-l-2-md">u-pad-l-2-md</div>
<div class="u-pad-l-3-md">u-pad-l-3-md</div>
<div class="u-pad-l-4-md">u-pad-l-4-md</div>
<div class="u-pad-l-5-md">u-pad-l-5-md</div>
<div class="u-pad-l-0-lg">u-pad-l-0-lg</div>
<div class="u-pad-l-h-lg">u-pad-l-h-lg</div>
<div class="u-pad-l-1-lg">u-pad-l-1-lg</div>
<div class="u-pad-l-2-lg">u-pad-l-2-lg</div>
<div class="u-pad-l-3-lg">u-pad-l-3-lg</div>
<div class="u-pad-l-4-lg">u-pad-l-4-lg</div>
<div class="u-pad-l-5-lg">u-pad-l-5-lg</div>
<div class="u-pad-x-0">u-pad-x-0</div>
<div class="u-pad-x-h">u-pad-x-h</div>
<div class="u-pad-x-1">u-pad-x-1</div>
<div class="u-pad-x-2">u-pad-x-2</div>
<div class="u-pad-x-3">u-pad-x-3</div>
<div class="u-pad-x-4">u-pad-x-4</div>
<div class="u-pad-x-5">u-pad-x-5</div>
<div class="u-pad-x-0-xs">u-pad-x-0-xs</div>
<div class="u-pad-x-h-xs">u-pad-x-h-xs</div>
<div class="u-pad-x-1-xs">u-pad-x-1-xs</div>
<div class="u-pad-x-2-xs">u-pad-x-2-xs</div>
<div class="u-pad-x-3-xs">u-pad-x-3-xs</div>
<div class="u-pad-x-4-xs">u-pad-x-4-xs</div>
<div class="u-pad-x-5-xs">u-pad-x-5-xs</div>
<div class="u-pad-x-0-sm">u-pad-x-0-sm</div>
<div class="u-pad-x-h-sm">u-pad-x-h-sm</div>
<div class="u-pad-x-1-sm">u-pad-x-1-sm</div>
<div class="u-pad-x-2-sm">u-pad-x-2-sm</div>
<div class="u-pad-x-3-sm">u-pad-x-3-sm</div>
<div class="u-pad-x-4-sm">u-pad-x-4-sm</div>
<div class="u-pad-x-5-sm">u-pad-x-5-sm</div>
<div class="u-pad-x-0-md">u-pad-x-0-md</div>
<div class="u-pad-x-h-md">u-pad-x-h-md</div>
<div class="u-pad-x-1-md">u-pad-x-1-md</div>
<div class="u-pad-x-2-md">u-pad-x-2-md</div>
<div class="u-pad-x-3-md">u-pad-x-3-md</div>
<div class="u-pad-x-4-md">u-pad-x-4-md</div>
<div class="u-pad-x-5-md">u-pad-x-5-md</div>
<div class="u-pad-x-0-lg">u-pad-x-0-lg</div>
<div class="u-pad-x-h-lg">u-pad-x-h-lg</div>
<div class="u-pad-x-1-lg">u-pad-x-1-lg</div>
<div class="u-pad-x-2-lg">u-pad-x-2-lg</div>
<div class="u-pad-x-3-lg">u-pad-x-3-lg</div>
<div class="u-pad-x-4-lg">u-pad-x-3-lg</div>
<div class="u-pad-x-5-lg">u-pad-x-5-lg</div>
<div class="u-pad-y-0">u-pad-y-0</div>
<div class="u-pad-y-h">u-pad-y-h</div>
<div class="u-pad-y-1">u-pad-y-1</div>
<div class="u-pad-y-2">u-pad-y-2</div>
<div class="u-pad-y-3">u-pad-y-3</div>
<div class="u-pad-y-4">u-pad-y-4</div>
<div class="u-pad-y-5">u-pad-y-5</div>
<div class="u-pad-y-0-xs">u-pad-y-0-xs</div>
<div class="u-pad-y-h-xs">u-pad-y-h-xs</div>
<div class="u-pad-y-1-xs">u-pad-y-1-xs</div>
<div class="u-pad-y-2-xs">u-pad-y-2-xs</div>
<div class="u-pad-y-3-xs">u-pad-y-3-xs</div>
<div class="u-pad-y-4-xs">u-pad-y-4-xs</div>
<div class="u-pad-y-5-xs">u-pad-y-5-xs</div>
<div class="u-pad-y-0-sm">u-pad-y-0-sm</div>
<div class="u-pad-y-h-sm">u-pad-y-h-sm</div>
<div class="u-pad-y-1-sm">u-pad-y-1-sm</div>
<div class="u-pad-y-2-sm">u-pad-y-2-sm</div>
<div class="u-pad-y-3-sm">u-pad-y-3-sm</div>
<div class="u-pad-y-4-sm">u-pad-y-4-sm</div>
<div class="u-pad-y-5-sm">u-pad-y-5-sm</div>
<div class="u-pad-y-0-md">u-pad-y-0-md</div>
<div class="u-pad-y-h-md">u-pad-y-h-md</div>
<div class="u-pad-y-1-md">u-pad-y-1-md</div>
<div class="u-pad-y-2-md">u-pad-y-2-md</div>
<div class="u-pad-y-3-md">u-pad-y-3-md</div>
<div class="u-pad-y-4-md">u-pad-y-4-md</div>
<div class="u-pad-y-5-md">u-pad-y-5-md</div>
<div class="u-pad-y-0-lg">u-pad-y-0-lg</div>
<div class="u-pad-y-h-lg">u-pad-y-h-lg</div>
<div class="u-pad-y-1-lg">u-pad-y-1-lg</div>
<div class="u-pad-y-2-lg">u-pad-y-2-lg</div>
<div class="u-pad-y-3-lg">u-pad-y-3-lg</div>
<div class="u-pad-y-4-lg">u-pad-y-4-lg</div>
<div class="u-pad-y-5-lg">u-pad-y-5-lg</div>