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 values 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/end 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/start 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: end margin set to auto

Padding

Different clases can be used to set the padding inside an element. All spacing values 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/end 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/start 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-m-l: margin l on screen size >= breakpoint m
  • ecl-u-ph-l-2xl: horizontal padding 2xl on screen size >= breakpoint l
  • ecl-u-ml-s-none: no start margin on screen size >= breakpoint s

Right to left spacing

All the spacing utilities are compatible with right to left text. CSS rules used are margin|padding-inline-start and margin|padding-inline-end instead of left and right.