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/eu-base/eu-base'; @import '@ecl/generic-utility-padding/generic-utility-padding'; // Use generic mixin @include exports('eu-utility-padding') { @include ecl-utility-padding(); }
- URL: /components/raw/eu-utility-padding/eu-utility-padding.scss
- Filesystem Path: ../../src/systems/eu/eu-utility/eu-utility-padding/eu-utility-padding.scss
- Size: 252 Bytes
- Handle: @ecl/eu-utility-padding
- Preview:
- Filesystem Path: ../../src/systems/eu/eu-utility/eu-utility-padding/eu-utility-padding.twig