Utilities

Spacing

Use following classes to add extra spacing.

Examples display outside spacing (margin) on the left and inside spacing (padding) on the right.

All around spacing

ecl-u-ma-2xs
ecl-u-pa-2xs
ecl-u-ma-xs
ecl-u-pa-xs
ecl-u-ma-s
ecl-u-pa-s
ecl-u-ma-m
ecl-u-pa-m
ecl-u-ma-l
ecl-u-pa-l
ecl-u-ma-xl
ecl-u-pa-xl
ecl-u-ma-2xl
ecl-u-pa-2xl
ecl-u-ma-3xl
ecl-u-pa-3xl
ecl-u-ma-4xl
ecl-u-pa-4xl
Fullscreen

Try it yourself on the playground

Playground

Vertical spacing

ecl-u-mv-2xs
ecl-u-pv-2xs
ecl-u-mv-xs
ecl-u-pv-xs
ecl-u-mv-s
ecl-u-pv-s
ecl-u-mv-m
ecl-u-pv-m
ecl-u-mv-l
ecl-u-pv-l
ecl-u-mv-xl
ecl-u-pv-xl
ecl-u-mv-2xl
ecl-u-pv-2xl
ecl-u-mv-3xl
ecl-u-pv-3xl
ecl-u-mv-4xl
ecl-u-pv-4xl
Fullscreen

Try it yourself on the playground

Playground

Directional vertical spacing

  • Use classes ecl-u-mt-* or ecl-u-pt-* to add spacing only on top
  • Use classes ecl-u-mb-* or ecl-u-pb-* to add spacing below.

Horizontal spacing

ecl-u-mh-2xs
ecl-u-ph-2xs
ecl-u-mh-xs
ecl-u-ph-xs
ecl-u-mh-s
ecl-u-ph-s
ecl-u-mh-m
ecl-u-ph-m
ecl-u-mh-l
ecl-u-ph-l
ecl-u-mh-xl
ecl-u-ph-xl
ecl-u-mh-2xl
ecl-u-ph-2xl
ecl-u-mh-3xl
ecl-u-ph-3xl
ecl-u-mh-4xl
ecl-u-ph-4xl
Fullscreen

Try it yourself on the playground

Playground

Directional horizontal spacing

  • Use classes ecl-u-ml-* or ecl-u-pl-* to add spacing only on the left
  • Use classes ecl-u-mr-* or ecl-u-pr-* to add spacing on the right.

Other spacing

  • Use classes ecl-u-m*-auto to set margin auto (horizontal, vertical or any direction)
  • Use classes ecl-u-m*-none or ecl-u-p*-none to set margin or padding to zero.

Responsive spacing

Add the breakpoint before spacing size to display it only with corresponding screen size (works for all kind of spacing ahead).

Examples:

  • spacing l on screen size >= breakpoint md
    ecl-u-ma-md-l
    ecl-u-pa-md-l
  • horizontal spacing 2xl on screen size >= breakpoint lg
    ecl-u-mh-lg-2xl
    ecl-u-ph-lg-2xl
  • no left spacing on screen size >= breakpoint sm
    ecl-u-ml-sm-none
    ecl-u-pl-sm-none