Simplex

Utility classes

Padding

Padding utility classes allow authors to apply paddings to any element at specific screen sizes.

Overall usage

Used to apply specific padding to any element or component.

Accessibility

N/A


padding-top: all sizes

u-pad-t-0
u-pad-t-h
u-pad-t-1
u-pad-t-2
u-pad-t-3
u-pad-t-4
u-pad-t-5
<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>

padding-top: xs only

u-pad-t-0-xs
u-pad-t-h-xs
u-pad-t-1-xs
u-pad-t-2-xs
u-pad-t-3-xs
u-pad-t-4-xs
u-pad-t-5-xs
<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>

padding-top: sm only

u-pad-t-0-sm
u-pad-t-h-sm
u-pad-t-1-sm
u-pad-t-2-sm
u-pad-t-3-sm
u-pad-t-4-sm
u-pad-t-5-sm
<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>

padding-top: md only

u-pad-t-0-md
u-pad-t-h-md
u-pad-t-1-md
u-pad-t-2-md
u-pad-t-3-md
u-pad-t-4-md
u-pad-t-5-md
<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>

padding-top: lg only

u-pad-t-0-lg
u-pad-t-h-lg
u-pad-t-1-lg
u-pad-t-2-lg
u-pad-t-3-lg
u-pad-t-4-lg
u-pad-t-5-lg
<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>

padding-right: all sizes

u-pad-r-0
u-pad-r-h
u-pad-r-1
u-pad-r-2
u-pad-r-3
u-pad-r-4
u-pad-r-5
<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>

padding-right: xs only

u-pad-r-0-xs
u-pad-r-h-xs
u-pad-r-1-xs
u-pad-r-2-xs
u-pad-r-3-xs
u-pad-r-4-xs
u-pad-r-5-xs
<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>

padding-right: sm only

u-pad-r-0-sm
u-pad-r-h-sm
u-pad-r-1-sm
u-pad-r-2-sm
u-pad-r-3-sm
u-pad-r-4-sm
u-pad-r-5-sm
<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>

padding-right: md only

u-pad-r-0-md
u-pad-r-h-md
u-pad-r-1-md
u-pad-r-2-md
u-pad-r-3-md
u-pad-r-4-md
u-pad-r-5-md
<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>

padding-right: lg only

u-pad-r-0-lg
u-pad-r-h-lg
u-pad-r-1-lg
u-pad-r-2-lg
u-pad-r-3-lg
u-pad-r-4-lg
u-pad-r-5-lg
<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>

padding-bottom: all sizes

u-pad-b-0
u-pad-b-h
u-pad-b-1
u-pad-b-2
u-pad-b-3
u-pad-b-4
u-pad-b-5
<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>

padding-bottom: xs only

u-pad-b-0-xs
u-pad-b-h-xs
u-pad-b-1-xs
u-pad-b-2-xs
u-pad-b-3-xs
u-pad-b-4-xs
u-pad-b-5-xs
<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>

padding-bottom: sm only

u-pad-b-0-sm
u-pad-b-h-sm
u-pad-b-1-sm
u-pad-b-2-sm
u-pad-b-3-sm
u-pad-b-4-sm
u-pad-b-5-sm
<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>

padding-bottom: md only

u-pad-b-0-md
u-pad-b-h-md
u-pad-b-1-md
u-pad-b-2-md
u-pad-b-3-md
u-pad-b-4-md
u-pad-b-5-md
<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>

padding-bottom: lg only

u-pad-b-0-lg
u-pad-b-h-lg
u-pad-b-1-lg
u-pad-b-2-lg
u-pad-b-3-lg
u-pad-b-4-lg
u-pad-b-5-lg
<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>

padding-left: all sizes

u-pad-l-0
u-pad-l-h
u-pad-l-1
u-pad-l-2
u-pad-l-3
u-pad-l-4
u-pad-l-5
<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>

padding-left: xs only

u-pad-l-0-xs
u-pad-l-h-xs
u-pad-l-1-xs
u-pad-l-2-xs
u-pad-l-3-xs
u-pad-l-4-xs
u-pad-l-5-xs
<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>

padding-left: sm only

u-pad-l-0-sm
u-pad-l-h-sm
u-pad-l-1-sm
u-pad-l-2-sm
u-pad-l-3-sm
u-pad-l-4-sm
u-pad-l-5-sm
<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>

padding-left: md only

u-pad-l-0-md
u-pad-l-h-md
u-pad-l-1-md
u-pad-l-2-md
u-pad-l-3-md
u-pad-l-4-md
u-pad-l-5-md
<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>

padding-left: lg only

u-pad-l-0-lg
u-pad-l-h-lg
u-pad-l-1-lg
u-pad-l-2-lg
u-pad-l-3-lg
u-pad-l-4-lg
u-pad-l-5-lg
<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>

padding-x (padding-left and padding-right): all sizes

u-pad-x-0
u-pad-x-h
u-pad-x-1
u-pad-x-2
u-pad-x-3
u-pad-x-4
u-pad-x-5
<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>

padding-x (padding-left and padding-right): xs only

u-pad-x-0-xs
u-pad-x-h-xs
u-pad-x-1-xs
u-pad-x-2-xs
u-pad-x-3-xs
u-pad-x-4-xs
u-pad-x-5-xs
<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>

padding-x (padding-left and padding-right): sm only

u-pad-x-0-sm
u-pad-x-h-sm
u-pad-x-1-sm
u-pad-x-2-sm
u-pad-x-3-sm
u-pad-x-4-sm
u-pad-x-5-sm
<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>

padding-x (padding-left and padding-right): md only

u-pad-x-0-md
u-pad-x-h-md
u-pad-x-1-md
u-pad-x-2-md
u-pad-x-3-md
u-pad-x-4-md
u-pad-x-5-md
<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>

padding-x (padding-left and padding-right): lg only

u-pad-x-0-lg
u-pad-x-h-lg
u-pad-x-1-lg
u-pad-x-2-lg
u-pad-x-3-lg
u-pad-x-4-lg
u-pad-x-5-lg

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

padding-y (padding-top and padding-bottom): all sizes

u-pad-y-0
u-pad-y-h
u-pad-y-1
u-pad-y-2
u-pad-y-3
u-pad-y-4
u-pad-y-5
<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>

padding-y (padding-top and padding-bottom): xs only

u-pad-y-0-xs
u-pad-y-h-xs
u-pad-y-1-xs
u-pad-y-2-xs
u-pad-y-3-xs
u-pad-y-4-xs
u-pad-y-5-xs
<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>

padding-y (padding-top and padding-bottom): sm only

u-pad-y-0-sm
u-pad-y-h-sm
u-pad-y-1-sm
u-pad-y-2-sm
u-pad-y-3-sm
u-pad-y-4-sm
u-pad-y-5-sm
<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>

padding-y (padding-top and padding-bottom): md only

u-pad-y-0-md
u-pad-y-h-md
u-pad-y-1-md
u-pad-y-2-md
u-pad-y-3-md
u-pad-y-4-md
u-pad-y-5-md
<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>

padding-y (padding-top and padding-bottom): lg only

u-pad-y-0-lg
u-pad-y-h-lg
u-pad-y-1-lg
u-pad-y-2-lg
u-pad-y-3-lg
u-pad-y-4-lg
u-pad-y-5-lg
<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>