Padding

Utility class to organize and implement padding properties. Padding uses all the values from spacing in design tokens.

Read all padding utilities

Padding - top

.p-t-2

.p-t-4

.p-t-6

.p-t-8

Class selectors	Properties & values
.p-t-2	padding-top: var(--rbrh-spacing-2);
.p-t-4	padding-top: var(--rbrh-spacing-4);
.p-t-6	padding-top: var(--rbrh-spacing-6);
.p-t-8	padding-top: var(--rbrh-spacing-8);

Padding - bottom

.p-b-2

.p-b-4

.p-b-6

.p-b-8

Class selectors	Properties & values
.p-b-2	padding-bottom: var(--rbrh-spacing-2);
.p-b-4	padding-bottom: var(--rbrh-spacing-4);
.p-b-6	padding-bottom: var(--rbrh-spacing-6);
.p-b-8	padding-bottom: var(--rbrh-spacing-8);

Padding - left

.p-l-2

.p-l-4

.p-l-6

.p-l-8

Class selectors	Properties & values
.p-l-2	padding-left: var(--rbrh-spacing-2);
.p-l-4	padding-left: var(--rbrh-spacing-4);
.p-l-6	padding-left: var(--rbrh-spacing-6);
.p-l-8	padding-left: var(--rbrh-spacing-8);

Padding - right

.p-r-2

.p-r-4

.p-r-6

.p-r-8

Class selectors	Properties & values
.p-r-2	padding-right: var(--rbrh-spacing-2);
.p-r-4	padding-right: var(--rbrh-spacing-4);
.p-r-6	padding-right: var(--rbrh-spacing-6);
.p-r-8	padding-right: var(--rbrh-spacing-8);

Padding - X axis

.p-x-2

.p-x-4

.p-x-6

.p-x-8

Class	Properties
.p-x-2	padding-right: var(--rbrh-spacing-2); padding-left: var(--rbrh-spacing-2);
.p-x-4	padding-right: var(--rbrh-spacing-4); padding-left: var(--rbrh-spacing-4);
.p-x-6	padding-right: var(--rbrh-spacing-6); padding-left: var(--rbrh-spacing-6);
.p-x-8	padding-right: var(--rbrh-spacing-8); padding-left: var(--rbrh-spacing-8);

Padding - Y axis

.p-y-2

.p-y-4

.p-y-6

.p-y-8

Class	Properties
.p-y-2	padding-top: var(--rbrh-spacing-2); padding-bottom: var(--rbrh-spacing-2);
.p-y-4	padding-top: var(--rbrh-spacing-4); padding-bottom: var(--rbrh-spacing-4);
.p-y-6	padding-top: var(--rbrh-spacing-6); padding-bottom: var(--rbrh-spacing-6);
.p-y-8	padding-top: var(--rbrh-spacing-8); padding-bottom: var(--rbrh-spacing-8);