Media WebUI

Basic Padding

The following table lists basic padding classes available and their sizes.

Classes
Size
pad-xxs, pad-left-xxs, pad-top-xxs, pad-right-xxs, pad-bottom-xxs
0.078rem
pad-xxs-xs, pad-left-xxs-xs, pad-top-xxs-xs, pad-right-xxs-xs, pad-bottom-xxs-xs
0.156rem
pad-xs, pad-left-xs, pad-top-xs, pad-right-xs, pad-bottom-xs
0.313rem
pad-xs-sm, pad-left-xs-sm, pad-top-xs-sm, pad-right-xs-sm, pad-bottom-xs-sm
0.469rem
pad-sm, pad-left-sm, pad-top-sm, pad-right-sm, pad-bottom-sm
0.625rem
pad-sm-md, pad-left-sm-md, pad-top-sm-md, pad-right-sm-md, pad-bottom-sm-md
0.781rem
pad-md, pad-left-md, pad-top-md, pad-right-md, pad-bottom-md
0.938rem
pad-md-lg, pad-left-md-lg, pad-top-md-lg, pad-right-md-lg, pad-bottom-md-lg
1.094rem
pad-lg, pad-left-lg, pad-top-lg, pad-right-lg, pad-bottom-lg
1.25rem
pad-lg-xl, pad-left-lg-xl, pad-top-lg-xl, pad-right-lg-xl, pad-bottom-lg-xl
1.406rem
pad-xl, pad-left-xl, pad-top-xl, pad-right-xl, pad-bottom-xl
1.563rem
pad-xl-xxl, pad-left-xl-xxl, pad-top-xl-xxl, pad-right-xl-xxl, pad-bottom-xl-xxl
1.719rem
pad-xxl, pad-left-xxl, pad-top-xxl, pad-right-xxl, pad-bottom-xxl
1.876rem
Example
Pellentesque habitant morbi tristique senectus
Pellentesque habitant morbi tristique senectus
Pellentesque habitant morbi tristique senectus
Pellentesque habitant morbi tristique senectus
Markup
<div class="container">
  <div class="table-row">
    <div class="table-col-5 pad-sm">
      <div>Pellentesque habitant morbi tristique senectus</div>
    </div>
    <div class="table-col-5 pad-md">
      <div>Pellentesque habitant morbi tristique senectus</div>
    </div>
    <div class="table-col-5 pad-lg">
      <div>Pellentesque habitant morbi tristique senectus</div>
    </div>
    <div class="table-col-5 pad-xl">
      <div>Pellentesque habitant morbi tristique senectus</div>
    </div>
  </div>
</div>

Padding for Grids

The col-padding-* classes are used to apply padding to all columns in any of the 3 grid types.

Tha classes available are as follows:

  • col-padding-xs
  • col-padding-sm
  • col-padding-md
  • col-padding-lg
  • col-padding-xl
Example
2017
Total
v60
v59
v58
Jan
73.7
-
-
0.1
Feb
74.1
-
-
0.2
Markup
<div class="responsive-gutter-md">
  <div class="container col-padding-md text-center text-sm text-bold">
    <div class="table-row">
      <div class="table-col-4 text-left">2017</div>
      <div class="table-col-4">Total</div>
      <div class="table-col-4">v60</div>
      <div class="table-col-4">v59</div>
      <div class="table-col-4">v58</div>
    </div>
    <div class="table-row">
      <div class="table-col-4 text-left">Jan</div>
      <div class="table-col-4">73.7</div>
      <div class="table-col-4">-</div>
      <div class="table-col-4">-</div>
      <div class="table-col-4">0.1</div>
    </div>
    <div class="table-row">
      <div class="table-col-4 text-left">Feb</div>
      <div class="table-col-4">74.1</div>
      <div class="table-col-4">-</div>
      <div class="table-col-4">-</div>
      <div class="table-col-4">0.2</div>
    </div>
  </div>
</div>

Padding with Flexbox

When padding is required for content within flex items, the normal pad-* classes can be used. However, it is best to apply padding to a nested container element rather than the flex item itself to avoid breaking the flex layout, as shown in the following example.

For more information on using containers see the Containers section.

Example
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Markup
<div class="flex-row">
  <div class="flex-size-6 flex-direction-column">     
    <div class="background-accent-1-light pad-md">
      Lorem ipsum dolor sit amet        
    </div>
    <div class="background-accent-4-light pad-md">
      Lorem ipsum dolor sit amet        
    </div>
  </div>
  <div class="flex-size-14">
    <div class="flex-col background-accent-2-light pad-md">
      Lorem ipsum dolor sit amet
    </div>
    <div class="flex-col background-accent-4-light pad-md">
      Lorem ipsum dolor sit amet
    </div>
  </div>
</div>

WebUI also provides the flex-padding-* helper classes. Similar to the col-padding-* classes, they can be used to apply padding to multiple elements at once with one important difference. The flexbox helper classes necessarily restrict the scope to the immediate child flex-col and flex-size-* elements only - this is because flexbox classes are used for more than just grids.

Here's an example showing how to apply padding to multiple columns

Example
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Markup
<div class="flex-row">
  <div class="flex-size-6 flex-direction-column background-accent-1-light flex-padding-md">     
    <div class="flex-col background-accent-1-light">
      Lorem ipsum dolor sit amet        
    </div>
    <div class="flex-col background-accent-4-light">
      Lorem ipsum dolor sit amet        
    </div>
  </div>
  <div class="flex-size-14 flex-padding-md">
    <div class="flex-col background-accent-2-light">
      Lorem ipsum dolor sit amet
    </div>
    <div class="flex-col background-accent-4-light">
      Lorem ipsum dolor sit amet
    </div>
  </div>
</div>