Skip to main content

Width

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

Read all width utilities

Width

.w-0.w-8.w-16.w-24.w-25.w-50.w-75.w-100
ClassProperties
.w-0width: var(--rbrh-spacing-0);
.w-8width: var(--rbrh-spacing-8);
.w-16width: var(--rbrh-spacing-16);
.w-24width: var(--rbrh-spacing-24);
.w-25width: 25%;
.w-50width: 50%;
.w-75width: 75%;
.w-100width: 100%;

Max-width

.max-w-0

.max-w-100

.max-w-fit

.max-w-max

.max-w-min

ClassProperties
.max-w-0max-width: var(--rbrh-spacing-0);
.max-w-100max-width: 100%;
.max-w-fitmax-width: fit-content;
.max-w-maxmax-width: max-content
.max-w-minmax-width: min-content;

Min-width

.min-w-0

.min-w-100

.min-w-fit

.min-w-max

.min-w-min

Class selectorsProperties & values
.min-w-0min-width: var(--rbrh-spacing-0);
.min-w-100min-width: 100%;
.min-w-fitmin-width: fit-content;
.min-w-maxmin-width: max-content
.min-w-minmin-width: min-content;