Skip to main content

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 selectorsProperties & values
.p-t-2padding-top: var(--rbrh-spacing-2);
.p-t-4padding-top: var(--rbrh-spacing-4);
.p-t-6padding-top: var(--rbrh-spacing-6);
.p-t-8padding-top: var(--rbrh-spacing-8);

Padding - bottom

.p-b-2

.p-b-4

.p-b-6

.p-b-8

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

Padding - left

.p-l-2

.p-l-4

.p-l-6

.p-l-8

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

Padding - right

.p-r-2

.p-r-4

.p-r-6

.p-r-8

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

Padding - X axis

.p-x-2

.p-x-4

.p-x-6

.p-x-8

ClassProperties
.p-x-2padding-right: var(--rbrh-spacing-2); padding-left: var(--rbrh-spacing-2);
.p-x-4padding-right: var(--rbrh-spacing-4); padding-left: var(--rbrh-spacing-4);
.p-x-6padding-right: var(--rbrh-spacing-6); padding-left: var(--rbrh-spacing-6);
.p-x-8padding-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

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