Spacing Utilities

Spacing tokens

Our spacing tokens are based on 1rem, or $spacer. The tokens should be used for consistency, instead of hard-coded values.

$spacer: 1rem;
$spacer-xs: $spacer * 0.25; // Not part of Mosaic spacing, here for Bootstrap compatibility
$spacer-sm: $spacer * 0.5;
$spacer-md: $spacer;
$spacer-lg: $spacer * 1.5;
$spacer-xl: $spacer * 3;
$spacer-xxl: $spacer * 5;

Bootstrap utilities

Please see BS5 spacing documentation for more information.

Spacing Utility Units for

margin/padding (.m-*, .p-* )
margin/padding-top (.mt-*, .pt-* )
margin/padding-bottom (.mb-*, .pb-* )
margin/padding-start (.ms-*, .ps-* )
margin/padding-end (.me-*, .pe-* )
margin/padding-x-axis (.mx-*, .px-* )
margin/padding-y-axis (.my-*, .py-* )

Class Name	Spacing in REMs	Spacing in pixels
`*-1`	0.25rem	4px
`*-2`	0.50rem	8px
`*-2`	0.50rem	8px
`*-3`	1rem	16px
`*-4`	1.5rem	24px
`*-5`	3rem	48px
`*-6`	5rem	80px