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​
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​
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​
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​
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​
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​
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); |