Europa Component Library

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). 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>
 
/* 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>
  • Content: 
    /*
  ECL Padding
  ===========

  Base:
    p = padding
  Modifiers:
    a = all
    h = horizontal
    v = vertical
    t = top
    r = right
    b = bottom
    l = left
*/

@each $key, $value in $ecl-spacing {
  .ecl-u-pa-#{$key} {
    padding: $value;
  }

  .ecl-u-ph-#{$key} {
    padding-left: $value;
    padding-right: $value;
  }

  .ecl-u-pv-#{$key} {
    padding-bottom: $value;
    padding-top: $value;
  }

  .ecl-u-pt-#{$key} {
    padding-top: $value;
  }

  .ecl-u-pr-#{$key} {
    padding-right: $value;
  }

  .ecl-u-pb-#{$key} {
    padding-bottom: $value;
  }

  .ecl-u-pl-#{$key} {
    padding-left: $value;
  }
}
  • URL: /components/raw/ecl-u-padding/ecl-u-padding.scss
  • Filesystem Path: framework/utilities/ecl-u-padding/ecl-u-padding.scss
  • Size: 635 Bytes
  • Handle: @ec-europa/ecl-u-padding
  • Preview:
  • Filesystem Path: framework/utilities/ecl-u-padding/ecl-u-padding.twig