Europa Component Library

Margin

Documentation • Demo

Margin utilities

Use the following classes to quickly set a margin:

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

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

See examples for more information.

<style>
  .exampleContainer {
    background-color: #9f9f9f;
    margin-bottom: 1em;
    display: inline-block;
  }
  .exampleContainerAuto {
    background-color: #9f9f9f;
    margin-bottom: 1em;
    display: inline-block;
    width: 225px;
    height: 100px;
  }
  .example {
    background-color: #404040;
    color: #fff;
    display: inline-block;
  }
  .exampleAuto {
    background-color: #404040;
    color: #fff;
    display: block;
    width: 150px;
    height: 100%;
  }
</style>

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

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

<h3 class="ecl-heading ecl-heading--h3">Margin vertical</h3>
<div class="exampleContainer"><div class="example ecl-u-mv-none">ecl-u-mv-none</div></div>
<div class="exampleContainer"><div class="example ecl-u-mh-xxs">ecl-u-mv-xxs</div></div>
<div class="exampleContainer"><div class="example ecl-u-mv-xs">ecl-u-mv-xs</div></div>
<div class="exampleContainer"><div class="example ecl-u-mv-s">ecl-u-mv-s</div></div>
<div class="exampleContainer"><div class="example ecl-u-mv-m">ecl-u-mv-m</div></div>
<div class="exampleContainer"><div class="example ecl-u-mv-l">ecl-u-mv-l</div></div>
<div class="exampleContainer"><div class="example ecl-u-mv-xl">ecl-u-mv-xl</div></div>
<div class="exampleContainer"><div class="example ecl-u-mv-xxl">ecl-u-mv-xxl</div></div>

<h3 class="ecl-heading ecl-heading--h3">Margin top</h3>
<div class="exampleContainer"><div class="example ecl-u-mt-none">ecl-u-mt-none</div></div>
<div class="exampleContainer"><div class="example ecl-u-mh-xxs">ecl-u-mt-xxs</div></div>
<div class="exampleContainer"><div class="example ecl-u-mt-xs">ecl-u-mt-xs</div></div>
<div class="exampleContainer"><div class="example ecl-u-mt-s">ecl-u-mt-s</div></div>
<div class="exampleContainer"><div class="example ecl-u-mt-m">ecl-u-mt-m</div></div>
<div class="exampleContainer"><div class="example ecl-u-mt-l">ecl-u-mt-l</div></div>
<div class="exampleContainer"><div class="example ecl-u-mt-xl">ecl-u-mt-xl</div></div>
<div class="exampleContainer"><div class="example ecl-u-mt-xxl">ecl-u-mt-xxl</div></div>

<h3 class="ecl-heading ecl-heading--h3">Margin right</h3>
<div class="exampleContainer"><div class="example ecl-u-mr-none">ecl-u-mr-none</div></div>
<div class="exampleContainer"><div class="example ecl-u-mh-xxs">ecl-u-mr-xxs</div></div>
<div class="exampleContainer"><div class="example ecl-u-mr-xs">ecl-u-mr-xs</div></div>
<div class="exampleContainer"><div class="example ecl-u-mr-s">ecl-u-mr-s</div></div>
<div class="exampleContainer"><div class="example ecl-u-mr-m">ecl-u-mr-m</div></div>
<div class="exampleContainer"><div class="example ecl-u-mr-l">ecl-u-mr-l</div></div>
<div class="exampleContainer"><div class="example ecl-u-mr-xl">ecl-u-mr-xl</div></div>
<div class="exampleContainer"><div class="example ecl-u-mr-xxl">ecl-u-mr-xxl</div></div>

<h3 class="ecl-heading ecl-heading--h3">Margin bottom</h3>
<div class="exampleContainer"><div class="example ecl-u-mb-none">ecl-u-mb-none</div></div>
<div class="exampleContainer"><div class="example ecl-u-mh-xxs">ecl-u-mb-xxs</div></div>
<div class="exampleContainer"><div class="example ecl-u-mb-xs">ecl-u-mb-xs</div></div>
<div class="exampleContainer"><div class="example ecl-u-mb-s">ecl-u-mb-s</div></div>
<div class="exampleContainer"><div class="example ecl-u-mb-m">ecl-u-mb-m</div></div>
<div class="exampleContainer"><div class="example ecl-u-mb-l">ecl-u-mb-l</div></div>
<div class="exampleContainer"><div class="example ecl-u-mb-xl">ecl-u-mb-xl</div></div>
<div class="exampleContainer"><div class="example ecl-u-mb-xxl">ecl-u-mb-xxl</div></div>

<h3 class="ecl-heading ecl-heading--h3">Margin left</h3>
<div class="exampleContainer"><div class="example ecl-u-ml-none">ecl-u-ml-none</div></div>
<div class="exampleContainer"><div class="example ecl-u-mh-xxs">ecl-u-ml-xxs</div></div>
<div class="exampleContainer"><div class="example ecl-u-ml-xs">ecl-u-ml-xs</div></div>
<div class="exampleContainer"><div class="example ecl-u-ml-s">ecl-u-ml-s</div></div>
<div class="exampleContainer"><div class="example ecl-u-ml-m">ecl-u-ml-m</div></div>
<div class="exampleContainer"><div class="example ecl-u-ml-l">ecl-u-ml-l</div></div>
<div class="exampleContainer"><div class="example ecl-u-ml-xl">ecl-u-ml-xl</div></div>
<div class="exampleContainer"><div class="example ecl-u-ml-xxl">ecl-u-ml-xxl</div></div>

<h3 class="ecl-heading ecl-heading--h3">Margin auto</h3>
<div class="exampleContainerAuto"><div class="exampleAuto ecl-u-ma-auto">ecl-u-ma-auto</div></div>
<div class="exampleContainerAuto"><div class="exampleAuto ecl-u-mh-auto">ecl-u-mh-auto</div></div>
<div class="exampleContainerAuto"><div class="exampleAuto ecl-u-mr-auto">ecl-u-mr-auto</div></div>
<div class="exampleContainerAuto"><div class="exampleAuto ecl-u-ml-auto">ecl-u-ml-auto</div></div>

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

  .exampleContainerAuto {
    background-color: #9f9f9f;
    margin-bottom: 1em;
    display: inline-block;
    width: 225px;
    height: 100px;
  }

  .example {
    background-color: #404040;
    color: #fff;
    display: inline-block;
  }

  .exampleAuto {
    background-color: #404040;
    color: #fff;
    display: block;
    width: 150px;
    height: 100%;
  }
</style>

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

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

<h3 class="ecl-heading ecl-heading--h3">Margin vertical</h3>
<div class="exampleContainer">
  <div class="example ecl-u-mv-none">ecl-u-mv-none</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mh-xxs">ecl-u-mv-xxs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mv-xs">ecl-u-mv-xs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mv-s">ecl-u-mv-s</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mv-m">ecl-u-mv-m</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mv-l">ecl-u-mv-l</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mv-xl">ecl-u-mv-xl</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mv-xxl">ecl-u-mv-xxl</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Margin top</h3>
<div class="exampleContainer">
  <div class="example ecl-u-mt-none">ecl-u-mt-none</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mh-xxs">ecl-u-mt-xxs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mt-xs">ecl-u-mt-xs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mt-s">ecl-u-mt-s</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mt-m">ecl-u-mt-m</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mt-l">ecl-u-mt-l</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mt-xl">ecl-u-mt-xl</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mt-xxl">ecl-u-mt-xxl</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Margin right</h3>
<div class="exampleContainer">
  <div class="example ecl-u-mr-none">ecl-u-mr-none</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mh-xxs">ecl-u-mr-xxs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mr-xs">ecl-u-mr-xs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mr-s">ecl-u-mr-s</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mr-m">ecl-u-mr-m</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mr-l">ecl-u-mr-l</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mr-xl">ecl-u-mr-xl</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mr-xxl">ecl-u-mr-xxl</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Margin bottom</h3>
<div class="exampleContainer">
  <div class="example ecl-u-mb-none">ecl-u-mb-none</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mh-xxs">ecl-u-mb-xxs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mb-xs">ecl-u-mb-xs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mb-s">ecl-u-mb-s</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mb-m">ecl-u-mb-m</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mb-l">ecl-u-mb-l</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mb-xl">ecl-u-mb-xl</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mb-xxl">ecl-u-mb-xxl</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Margin left</h3>
<div class="exampleContainer">
  <div class="example ecl-u-ml-none">ecl-u-ml-none</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-mh-xxs">ecl-u-ml-xxs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-ml-xs">ecl-u-ml-xs</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-ml-s">ecl-u-ml-s</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-ml-m">ecl-u-ml-m</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-ml-l">ecl-u-ml-l</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-ml-xl">ecl-u-ml-xl</div>
</div>
<div class="exampleContainer">
  <div class="example ecl-u-ml-xxl">ecl-u-ml-xxl</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Margin auto</h3>
<div class="exampleContainerAuto">
  <div class="exampleAuto ecl-u-ma-auto">ecl-u-ma-auto</div>
</div>
<div class="exampleContainerAuto">
  <div class="exampleAuto ecl-u-mh-auto">ecl-u-mh-auto</div>
</div>
<div class="exampleContainerAuto">
  <div class="exampleAuto ecl-u-mr-auto">ecl-u-mr-auto</div>
</div>
<div class="exampleContainerAuto">
  <div class="exampleAuto ecl-u-ml-auto">ecl-u-ml-auto</div>
</div>

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

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

/* stylelint-disable max-nesting-depth */
@each $breakpoint in map-keys($ecl-grid-breakpoints) {
  @include ecl-media-breakpoint-up($breakpoint) {
    $infix: ecl-breakpoint-infix($breakpoint, $ecl-grid-breakpoints);

    @each $key, $value in $ecl-spacing {
      .ecl-u-ma#{$infix}-#{$key} {
        margin: $value;
      }

      .ecl-u-mh#{$infix}-#{$key} {
        margin-left: $value;
        margin-right: $value;
      }

      .ecl-u-mv#{$infix}-#{$key} {
        margin-bottom: $value;
        margin-top: $value;
      }

      .ecl-u-mt#{$infix}-#{$key} {
        margin-top: $value;
      }

      .ecl-u-mr#{$infix}-#{$key} {
        margin-right: $value;
      }

      .ecl-u-mb#{$infix}-#{$key} {
        margin-bottom: $value;
      }

      .ecl-u-ml#{$infix}-#{$key} {
        margin-left: $value;
      }
    }

    /*
      ECL Margin auto
      ===============
      Base:
        m = margin
      Modifiers:
        a = all
        h = horizontal
        r = right
        l = left
    */

    .ecl-u-ma#{$infix}-auto {
      margin: auto;
    }

    .ecl-u-mh#{$infix}-auto {
      margin-left: auto;
      margin-right: auto;
    }

    .ecl-u-mr#{$infix}-auto {
      margin-right: auto;
    }

    .ecl-u-ml#{$infix}-auto {
      margin-left: auto;
    }
  }
}
  • URL: /components/raw/ecl-u-margin/ecl-u-margin.scss
  • Filesystem Path: framework/utilities/ecl-u-margin/ecl-u-margin.scss
  • Size: 1.5 KB
  • Handle: @ec-europa/ecl-u-margin
  • Preview:
  • Filesystem Path: framework/utilities/ecl-u-margin/ecl-u-margin.twig