Utilities

Spacing

Spacing utilities let you manage spacing inside or outside elements. See the showcase tab to have an overview of it.

Margin

Different clases can be used to set the margin around an element. All spacing tokens are listed on guidelines.

Available values are:

  • ecl-u-ma-* (ecl-u-ma-2xs to ecl-u-ma-4xl): all around margins
  • ecl-u-mv-* (ecl-u-mv-2xs to ecl-u-mv-4xl): vertical margins
  • ecl-u-mh-* (ecl-u-mh-2xs to ecl-u-mh-4xl): horizontal margins
  • ecl-u-mt-* (ecl-u-mt-2xs to ecl-u-mt-4xl): top margins
  • ecl-u-mr-* (ecl-u-mr-2xs to ecl-u-mr-4xl): right margins
  • ecl-u-mb-* (ecl-u-mb-2xs to ecl-u-mb-4xl): bottom margins
  • ecl-u-ml-* (ecl-u-ml-2xs to ecl-u-ml-4xl): left margins

Margin auto or none

All margin classes listed ahead can also be set to auto or none.

For instance:

  • ecl-u-ma-none: all around margin set to 0
  • ecl-u-mv-none: vertical margin set to 0
  • ecl-u-mh-auto: horizontal margin set to auto
  • ecl-u-mr-auto: right margin set to auto

Padding

Different clases can be used to set the padding inside an element. All spacing tokens are listed on guidelines.

Available values are:

  • ecl-u-pa-* (ecl-u-pa-2xs to ecl-u-pa-4xl): all around padding
  • ecl-u-pv-* (ecl-u-pv-2xs to ecl-u-pv-4xl): vertical padding
  • ecl-u-ph-* (ecl-u-ph-2xs to ecl-u-ph-4xl): horizontal padding
  • ecl-u-pt-* (ecl-u-pt-2xs to ecl-u-pt-4xl): top padding
  • ecl-u-pr-* (ecl-u-pr-2xs to ecl-u-pr-4xl): right padding
  • ecl-u-pb-* (ecl-u-pb-2xs to ecl-u-pb-4xl): bottom padding
  • ecl-u-pl-* (ecl-u-pl-2xs to ecl-u-pl-4xl): left padding

Padding none

All padding classes listed ahead can also be set to none.

For instance:

  • ecl-u-pa-none: all around padding set to 0
  • ecl-u-pv-none: vertical padding set to 0

Responsive spacing

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

Examples:

  • ecl-u-ma-md-l: margin l on screen size >= breakpoint md
  • ecl-u-ph-lg-2xl: horizontal padding 2xl on screen size >= breakpoint lg
  • ecl-u-ml-sm-none: no left margin on screen size >= breakpoint sm