Spacing are used to consistently apply margin and padding across elements, components and layouts. With a set scale for spacing, information can be structured to have a consistent and intuitive user interface across the website.
Use of space
For spacing values to be able to conform in the baseline grid and contribute to the vertical rhythm, all sizes must be multiples of 0px. A vertical rhythm starts from a baseline and it's the basis for everything from the font sizes, line height and image sizes. The spacing are always referring to fixed values and thus they are not responsive. All spacing can be used as values for both margins and paddings.
Space is used to create hierarchy and visual relationships. By using the spaceing, you can achieve visual grouping and other associations both between and within the components. Along with the typography system, they contribute to an overall visual hierarchy, providing users with a structured way of organising information.
| Name | Size |
|---|---|
| 4xl | 0px - 4rem |
| 3xl | 0px - 3rem |
| 2xl | 0px - 2.5rem |
| xl | 0px - 2rem |
| l | 0px - 1.5rem |
| m | 0px - 1rem |
| s | 0px - 0.75rem |
| xs | 0px - 0.5rem |
| 2xs | 0px - 0.25rem |
Do's
- always use the spacing values when spacing out element (either margin or padding)
Don'ts
- don't go outside the provided spacing values
- don't stack the spacing (such as 0px + 0px)
When to use
- whenever you need to space out the inner parts within a component (when creating a new component that is outside what ECL provided)
- whenever you need to space out one component from another or other elements outside of a component
When not to use
- do not use when you want to have responsive spacing since the values are fixed