EC System

Padding

Documentation • Demo

Padding utilities

Use the following classes to quickly set a padding:

  • ecl-u-pa-xxl: Extra extra large padding
  • ecl-u-pa-xl: Extra large padding
  • ecl-u-pa-l: Large padding
  • ecl-u-pa-m: Medium padding
  • ecl-u-pa-s: Small padding
  • ecl-u-pa-xs: Extra small padding
  • ecl-u-pa-xxs: Extra extra small padding

You can also set a specific padding (top, right bottom, left, horizontal, vertical), and/or a specific breakpoint.

See examples for more information.

<style>
  .exampleContainer {
    display: inline-block;
  }
  .example {
    background-color: #404040;
    color: white;
    display: inline-block;
  }
</style>

<h3 class="ecl-heading ecl-heading--h3">Padding all</h3>
<div class="exampleContainer"><div class="example ecl-u-pa-none" style="">ecl-u-pa-none</div></div>
<div class="exampleContainer"><div class="example ecl-u-pa-xxs" style="">ecl-u-pa-xxs</div></div>
<div class="exampleContainer"><div class="example ecl-u-pa-xs" style="">ecl-u-pa-xs</div></div>
<div class="exampleContainer"><div class="example ecl-u-pa-s" style="">ecl-u-pa-s</div></div>
<div class="exampleContainer"><div class="example ecl-u-pa-m" style="">ecl-u-pa-m</div></div>
<div class="exampleContainer"><div class="example ecl-u-pa-l" style="">ecl-u-pa-l</div></div>
<div class="exampleContainer"><div class="example ecl-u-pa-xl" style="">ecl-u-pa-xl</div></div>
<div class="exampleContainer"><div class="example ecl-u-pa-xxl" style="">ecl-u-pa-xxl</div></div>

<h3 class="ecl-heading ecl-heading--h3">Padding horizontal</h3>
<div class="exampleContainer"><div class="example ecl-u-ph-none" style="">ecl-u-ph-none</div></div>
<div class="exampleContainer"><div class="example ecl-u-ph-xxs" style="">ecl-u-ph-xxs</div></div>
<div class="exampleContainer"><div class="example ecl-u-ph-xs" style="">ecl-u-ph-xs</div></div>
<div class="exampleContainer"><div class="example ecl-u-ph-s" style="">ecl-u-ph-s</div></div>
<div class="exampleContainer"><div class="example ecl-u-ph-m" style="">ecl-u-ph-m</div></div>
<div class="exampleContainer"><div class="example ecl-u-ph-l" style="">ecl-u-ph-l</div></div>
<div class="exampleContainer"><div class="example ecl-u-ph-xl" style="">ecl-u-ph-xl</div></div>
<div class="exampleContainer"><div class="example ecl-u-ph-xxl" style="">ecl-u-ph-xxl</div></div>

<h3 class="ecl-heading ecl-heading--h3">Padding vertical</h3>
<div class="exampleContainer"><div class="example ecl-u-pv-none" style="">ecl-u-pv-none</div></div>
<div class="exampleContainer"><div class="example ecl-u-pv-xxs" style="">ecl-u-pv-xxs</div></div>
<div class="exampleContainer"><div class="example ecl-u-pv-xs" style="">ecl-u-pv-xs</div></div>
<div class="exampleContainer"><div class="example ecl-u-pv-s" style="">ecl-u-pv-s</div></div>
<div class="exampleContainer"><div class="example ecl-u-pv-m" style="">ecl-u-pv-m</div></div>
<div class="exampleContainer"><div class="example ecl-u-pv-l" style="">ecl-u-pv-l</div></div>
<div class="exampleContainer"><div class="example ecl-u-pv-xl" style="">ecl-u-pv-xl</div></div>
<div class="exampleContainer"><div class="example ecl-u-pv-xxl" style="">ecl-u-pv-xxl</div></div>

<h3 class="ecl-heading ecl-heading--h3">Padding top</h3>
<div class="exampleContainer"><div class="example ecl-u-pt-none" style="">ecl-u-pt-none</div></div>
<div class="exampleContainer"><div class="example ecl-u-pt-xxs" style="">ecl-u-pt-xxs</div></div>
<div class="exampleContainer"><div class="example ecl-u-pt-xs" style="">ecl-u-pt-xs</div></div>
<div class="exampleContainer"><div class="example ecl-u-pt-s" style="">ecl-u-pt-s</div></div>
<div class="exampleContainer"><div class="example ecl-u-pt-m" style="">ecl-u-pt-m</div></div>
<div class="exampleContainer"><div class="example ecl-u-pt-l" style="">ecl-u-pt-l</div></div>
<div class="exampleContainer"><div class="example ecl-u-pt-xl" style="">ecl-u-pt-xl</div></div>
<div class="exampleContainer"><div class="example ecl-u-pt-xxl" style="">ecl-u-pt-xxl</div></div>

<h3 class="ecl-heading ecl-heading--h3">Padding right</h3>
<div class="exampleContainer"><div class="example ecl-u-pr-none" style="">ecl-u-pr-none</div></div>
<div class="exampleContainer"><div class="example ecl-u-pr-xxs" style="">ecl-u-pr-xxs</div></div>
<div class="exampleContainer"><div class="example ecl-u-pr-xs" style="">ecl-u-pr-xs</div></div>
<div class="exampleContainer"><div class="example ecl-u-pr-s" style="">ecl-u-pr-s</div></div>
<div class="exampleContainer"><div class="example ecl-u-pr-m" style="">ecl-u-pr-m</div></div>
<div class="exampleContainer"><div class="example ecl-u-pr-l" style="">ecl-u-pr-l</div></div>
<div class="exampleContainer"><div class="example ecl-u-pr-xl" style="">ecl-u-pr-xl</div></div>
<div class="exampleContainer"><div class="example ecl-u-pr-xxl" style="">ecl-u-pr-xxl</div></div>

<h3 class="ecl-heading ecl-heading--h3">Padding bottom</h3>
<div class="exampleContainer"><div class="example ecl-u-pb-none" style="">ecl-u-pb-none</div></div>
<div class="exampleContainer"><div class="example ecl-u-pb-xxs" style="">ecl-u-pb-xxs</div></div>
<div class="exampleContainer"><div class="example ecl-u-pb-xs" style="">ecl-u-pb-xs</div></div>
<div class="exampleContainer"><div class="example ecl-u-pb-s" style="">ecl-u-pb-s</div></div>
<div class="exampleContainer"><div class="example ecl-u-pb-m" style="">ecl-u-pb-m</div></div>
<div class="exampleContainer"><div class="example ecl-u-pb-l" style="">ecl-u-pb-l</div></div>
<div class="exampleContainer"><div class="example ecl-u-pb-xl" style="">ecl-u-pb-xl</div></div>
<div class="exampleContainer"><div class="example ecl-u-pb-xxl" style="">ecl-u-pb-xxl</div></div>

<h3 class="ecl-heading ecl-heading--h3">Padding left</h3>
<div class="exampleContainer"><div class="example ecl-u-pl-none" style="">ecl-u-pl-none</div></div>
<div class="exampleContainer"><div class="example ecl-u-pl-xxs" style="">ecl-u-pl-xxs</div></div>
<div class="exampleContainer"><div class="example ecl-u-pl-xs" style="">ecl-u-pl-xs</div></div>
<div class="exampleContainer"><div class="example ecl-u-pl-s" style="">ecl-u-pl-s</div></div>
<div class="exampleContainer"><div class="example ecl-u-pl-m" style="">ecl-u-pl-m</div></div>
<div class="exampleContainer"><div class="example ecl-u-pl-l" style="">ecl-u-pl-l</div></div>
<div class="exampleContainer"><div class="example ecl-u-pl-xl" style="">ecl-u-pl-xl</div></div>
<div class="exampleContainer"><div class="example ecl-u-pl-xxl" style="">ecl-u-pl-xxl</div></div>

<h3 class="ecl-heading ecl-heading--h3">Responsive padding</h3>
<p class="ecl-paragraph">Add the breakpoint before padding size to display it only with corresponding screen size (works for all kind of padding ahead).</p>
<div class="exampleContainer"><div class="example ecl-u-pa-l">ecl-u-pa-l</div></div>
<div class="exampleContainer"><div class="example ecl-u-pa-sm-l">ecl-u-pa-sm-l</div></div>
<div class="exampleContainer"><div class="example ecl-u-pa-md-l">ecl-u-pa-md-l</div></div>
<div class="exampleContainer"><div class="example ecl-u-pa-lg-l">ecl-u-pa-lg-l</div></div>
<div class="exampleContainer"><div class="example ecl-u-pa-xl-l">ecl-u-pa-xl-l</div></div>
 
/* No context defined for this component. */
 
<style>
  .exampleContainer {
    display: inline-block;
  }

  .example {
    background-color: #404040;
    color: white;
    display: inline-block;
  }
</style>

<h3 class="ecl-heading ecl-heading--h3">Padding all</h3>
<div class="exampleContainer">
  <div class="example ecl-u-pa-none" style="">ecl-u-pa-none</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pa-xxs" style="">ecl-u-pa-xxs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pa-xs" style="">ecl-u-pa-xs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pa-s" style="">ecl-u-pa-s</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pa-m" style="">ecl-u-pa-m</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pa-l" style="">ecl-u-pa-l</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pa-xl" style="">ecl-u-pa-xl</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pa-xxl" style="">ecl-u-pa-xxl</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Padding horizontal</h3>
<div class="exampleContainer">
  <div class="example ecl-u-ph-none" style="">ecl-u-ph-none</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-ph-xxs" style="">ecl-u-ph-xxs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-ph-xs" style="">ecl-u-ph-xs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-ph-s" style="">ecl-u-ph-s</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-ph-m" style="">ecl-u-ph-m</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-ph-l" style="">ecl-u-ph-l</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-ph-xl" style="">ecl-u-ph-xl</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-ph-xxl" style="">ecl-u-ph-xxl</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Padding vertical</h3>
<div class="exampleContainer">
  <div class="example ecl-u-pv-none" style="">ecl-u-pv-none</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pv-xxs" style="">ecl-u-pv-xxs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pv-xs" style="">ecl-u-pv-xs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pv-s" style="">ecl-u-pv-s</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pv-m" style="">ecl-u-pv-m</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pv-l" style="">ecl-u-pv-l</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pv-xl" style="">ecl-u-pv-xl</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pv-xxl" style="">ecl-u-pv-xxl</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Padding top</h3>
<div class="exampleContainer">
  <div class="example ecl-u-pt-none" style="">ecl-u-pt-none</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pt-xxs" style="">ecl-u-pt-xxs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pt-xs" style="">ecl-u-pt-xs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pt-s" style="">ecl-u-pt-s</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pt-m" style="">ecl-u-pt-m</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pt-l" style="">ecl-u-pt-l</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pt-xl" style="">ecl-u-pt-xl</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pt-xxl" style="">ecl-u-pt-xxl</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Padding right</h3>
<div class="exampleContainer">
  <div class="example ecl-u-pr-none" style="">ecl-u-pr-none</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pr-xxs" style="">ecl-u-pr-xxs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pr-xs" style="">ecl-u-pr-xs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pr-s" style="">ecl-u-pr-s</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pr-m" style="">ecl-u-pr-m</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pr-l" style="">ecl-u-pr-l</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pr-xl" style="">ecl-u-pr-xl</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pr-xxl" style="">ecl-u-pr-xxl</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Padding bottom</h3>
<div class="exampleContainer">
  <div class="example ecl-u-pb-none" style="">ecl-u-pb-none</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pb-xxs" style="">ecl-u-pb-xxs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pb-xs" style="">ecl-u-pb-xs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pb-s" style="">ecl-u-pb-s</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pb-m" style="">ecl-u-pb-m</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pb-l" style="">ecl-u-pb-l</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pb-xl" style="">ecl-u-pb-xl</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pb-xxl" style="">ecl-u-pb-xxl</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Padding left</h3>
<div class="exampleContainer">
  <div class="example ecl-u-pl-none" style="">ecl-u-pl-none</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pl-xxs" style="">ecl-u-pl-xxs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pl-xs" style="">ecl-u-pl-xs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pl-s" style="">ecl-u-pl-s</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pl-m" style="">ecl-u-pl-m</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pl-l" style="">ecl-u-pl-l</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pl-xl" style="">ecl-u-pl-xl</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pl-xxl" style="">ecl-u-pl-xxl</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Responsive padding</h3>
<p class="ecl-paragraph">Add the breakpoint before padding size to display it only with corresponding screen size (works for all kind of padding ahead).</p>
<div class="exampleContainer">
  <div class="example ecl-u-pa-l">ecl-u-pa-l</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pa-sm-l">ecl-u-pa-sm-l</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pa-md-l">ecl-u-pa-md-l</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pa-lg-l">ecl-u-pa-lg-l</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-pa-xl-l">ecl-u-pa-xl-l</div>
</div>
  • Content: 
    /**
 * Padding utilities
 */

// Import base and generic
@import '@ecl/ec-base/ec-base';
@import '@ecl/generic-utility-padding/generic-utility-padding';

// Use generic mixin
@include exports('ec-utility-padding') {
  @include ecl-utility-padding();
}
  • URL: /components/raw/ec-utility-padding/ec-utility-padding.scss
  • Filesystem Path: ../../src/systems/ec/ec-utility/ec-utility-padding/ec-utility-padding.scss
  • Size: 252 Bytes
  • Handle: @ecl/ec-utility-padding
  • Preview:
  • Filesystem Path: ../../src/systems/ec/ec-utility/ec-utility-padding/ec-utility-padding.twig