Width
Utility class to organize and implement width properties. Width uses all the values from spacing in design tokens.
Read all width utilitiesWidth​
.w-0.w-8.w-16.w-24.w-25.w-50.w-75.w-100
| Class | Properties |
|---|---|
| .w-0 | width: var(--rbrh-spacing-0); |
| .w-8 | width: var(--rbrh-spacing-8); |
| .w-16 | width: var(--rbrh-spacing-16); |
| .w-24 | width: var(--rbrh-spacing-24); |
| .w-25 | width: 25%; |
| .w-50 | width: 50%; |
| .w-75 | width: 75%; |
| .w-100 | width: 100%; |
Max-width​
.max-w-0
.max-w-100
.max-w-fit
.max-w-max
.max-w-min
| Class | Properties |
|---|---|
| .max-w-0 | max-width: var(--rbrh-spacing-0); |
| .max-w-100 | max-width: 100%; |
| .max-w-fit | max-width: fit-content; |
| .max-w-max | max-width: max-content |
| .max-w-min | max-width: min-content; |
Min-width​
.min-w-0
.min-w-100
.min-w-fit
.min-w-max
.min-w-min
| Class selectors | Properties & values |
|---|---|
| .min-w-0 | min-width: var(--rbrh-spacing-0); |
| .min-w-100 | min-width: 100%; |
| .min-w-fit | min-width: fit-content; |
| .min-w-max | min-width: max-content |
| .min-w-min | min-width: min-content; |