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
ecl-u-ma-5xl
ecl-u-pa-5xl
ecl-u-ma-6xl
ecl-u-pa-6xl

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
ecl-u-mv-5xl
ecl-u-pv-5xl
ecl-u-mv-6xl
ecl-u-pv-6xl

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
ecl-u-mh-5xl
ecl-u-ph-5xl
ecl-u-mh-6xl
ecl-u-ph-6xl

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 start
  • use classes ecl-u-mr-* or ecl-u-pr-* to add spacing on the end

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 m
    ecl-u-ma-m-l
    ecl-u-pa-m-l
  • horizontal spacing 2xl on screen size >= breakpoint l
    ecl-u-mh-l-2xl
    ecl-u-ph-l-2xl
  • no left spacing on screen size >= breakpoint s
    ecl-u-ml-s-none
    ecl-u-pl-s-none