Spacing
Selects side or axis
Margin
Usage
/* Format */
.u-margin__{side}--{spacing} {}
/* Examples & modifiers */
.u-margin__left--0 {}
.u-margin__left--1 {}
.u-margin__left--2 {}
.u-margin__left--3 {}
.u-margin__left--4 {}
.u-margin__left--5 {}
.u-margin__left--6 {}
.u-margin__left--7 {}
.u-margin__left--8 {}
.u-margin__left--9 {}
.u-margin__left--10 {}
.u-margin__left--11 {}
.u-margin__left--12 {}
.u-margin__left--auto {}
.u-margin__right--0 {}
.u-margin__right--1 {}
.u-margin__right--2 {}
.u-margin__right--3 {}
.u-margin__right--4 {}
.u-margin__right--5 {}
.u-margin__right--6 {}
.u-margin__right--7 {}
.u-margin__right--8 {}
.u-margin__right--9 {}
.u-margin__right--10 {}
.u-margin__right--11 {}
.u-margin__right--12 {}
.u-margin__right--auto {}
.u-margin__top--0 {}
.u-margin__top--1 {}
.u-margin__top--2 {}
.u-margin__top--3 {}
.u-margin__top--4 {}
.u-margin__top--5 {}
.u-margin__top--6 {}
.u-margin__top--7 {}
.u-margin__top--8 {}
.u-margin__top--9 {}
.u-margin__top--10 {}
.u-margin__top--11 {}
.u-margin__top--12 {}
.u-margin__top--auto {}
.u-margin__bottom--0 {}
.u-margin__bottom--1 {}
.u-margin__bottom--2 {}
.u-margin__bottom--3 {}
.u-margin__bottom--4 {}
.u-margin__bottom--5 {}
.u-margin__bottom--6 {}
.u-margin__bottom--7 {}
.u-margin__bottom--8 {}
.u-margin__bottom--9 {}
.u-margin__bottom--10 {}
.u-margin__bottom--11 {}
.u-margin__bottom--12 {}
.u-margin__bottom--auto {}
.u-margin__y--0 {}
.u-margin__y--1 {}
.u-margin__y--2 {}
.u-margin__y--3 {}
.u-margin__y--4 {}
.u-margin__y--5 {}
.u-margin__y--6 {}
.u-margin__y--7 {}
.u-margin__y--8 {}
.u-margin__y--9 {}
.u-margin__y--10 {}
.u-margin__y--11 {}
.u-margin__y--12 {}
.u-margin__y--auto {}
.u-margin__x--0 {}
.u-margin__x--1 {}
.u-margin__x--2 {}
.u-margin__x--3 {}
.u-margin__x--4 {}
.u-margin__x--5 {}
.u-margin__x--6 {}
.u-margin__x--7 {}
.u-margin__x--8 {}
.u-margin__x--9 {}
.u-margin__x--10 {}
.u-margin__x--11 {}
.u-margin__x--12 {}
.u-margin__x--auto {}| Modifier | Values | Description |
|---|---|---|
|
side
|
left, right, top, bottom, y, x | Selects side or axis |
|
spacing
|
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, auto | Selects spacing |
Supports responsive suffix (e.g. u-margin__{side}--{spacing}@{sm, md, lg}).
Preview
Preview
Padding
Usage
/* Format */
.u-padding__{side}--{spacing} {}
/* Examples & modifiers */
.u-padding__left--0 {}
.u-padding__left--1 {}
.u-padding__left--2 {}
.u-padding__left--3 {}
.u-padding__left--4 {}
.u-padding__left--5 {}
.u-padding__left--6 {}
.u-padding__left--7 {}
.u-padding__left--8 {}
.u-padding__left--9 {}
.u-padding__left--10 {}
.u-padding__left--11 {}
.u-padding__left--12 {}
.u-padding__left--auto {}
.u-padding__right--0 {}
.u-padding__right--1 {}
.u-padding__right--2 {}
.u-padding__right--3 {}
.u-padding__right--4 {}
.u-padding__right--5 {}
.u-padding__right--6 {}
.u-padding__right--7 {}
.u-padding__right--8 {}
.u-padding__right--9 {}
.u-padding__right--10 {}
.u-padding__right--11 {}
.u-padding__right--12 {}
.u-padding__right--auto {}
.u-padding__top--0 {}
.u-padding__top--1 {}
.u-padding__top--2 {}
.u-padding__top--3 {}
.u-padding__top--4 {}
.u-padding__top--5 {}
.u-padding__top--6 {}
.u-padding__top--7 {}
.u-padding__top--8 {}
.u-padding__top--9 {}
.u-padding__top--10 {}
.u-padding__top--11 {}
.u-padding__top--12 {}
.u-padding__top--auto {}
.u-padding__bottom--0 {}
.u-padding__bottom--1 {}
.u-padding__bottom--2 {}
.u-padding__bottom--3 {}
.u-padding__bottom--4 {}
.u-padding__bottom--5 {}
.u-padding__bottom--6 {}
.u-padding__bottom--7 {}
.u-padding__bottom--8 {}
.u-padding__bottom--9 {}
.u-padding__bottom--10 {}
.u-padding__bottom--11 {}
.u-padding__bottom--12 {}
.u-padding__bottom--auto {}
.u-padding__y--0 {}
.u-padding__y--1 {}
.u-padding__y--2 {}
.u-padding__y--3 {}
.u-padding__y--4 {}
.u-padding__y--5 {}
.u-padding__y--6 {}
.u-padding__y--7 {}
.u-padding__y--8 {}
.u-padding__y--9 {}
.u-padding__y--10 {}
.u-padding__y--11 {}
.u-padding__y--12 {}
.u-padding__y--auto {}
.u-padding__x--0 {}
.u-padding__x--1 {}
.u-padding__x--2 {}
.u-padding__x--3 {}
.u-padding__x--4 {}
.u-padding__x--5 {}
.u-padding__x--6 {}
.u-padding__x--7 {}
.u-padding__x--8 {}
.u-padding__x--9 {}
.u-padding__x--10 {}
.u-padding__x--11 {}
.u-padding__x--12 {}
.u-padding__x--auto {}| Modifier | Values | Description |
|---|---|---|
|
side
|
left, right, top, bottom, y, x | Selects side or axis |
|
spacing
|
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, auto | Selects spacing |
Supports responsive suffix (e.g. u-padding__{side}--{spacing}@{sm, md, lg}).
Preview
Preview