Space tokens
Space
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| 4 |
Click to copy
--rh-space-xs |
Click to copy
4px |
4px spacer |
var(--rh-space-xs, 4px)
https://ux.redhat.com/tokens/space/#rh-space-xs
|
| 6 |
Click to copy
--rh-space-sm |
Click to copy
6px |
6px spacer |
var(--rh-space-sm, 6px)
https://ux.redhat.com/tokens/space/#rh-space-sm
|
| 8 |
Click to copy
--rh-space-md |
Click to copy
8px |
8px spacer |
var(--rh-space-md, 8px)
https://ux.redhat.com/tokens/space/#rh-space-md
|
| 16 |
Click to copy
--rh-space-lg |
Click to copy
16px |
16px spacer |
var(--rh-space-lg, 16px)
https://ux.redhat.com/tokens/space/#rh-space-lg
|
| 24 |
Click to copy
--rh-space-xl |
Click to copy
24px |
24px spacer |
var(--rh-space-xl, 24px)
https://ux.redhat.com/tokens/space/#rh-space-xl
|
| 32 |
Click to copy
--rh-space-2xl |
Click to copy
32px |
32px spacer |
var(--rh-space-2xl, 32px)
https://ux.redhat.com/tokens/space/#rh-space-2xl
|
| 48 |
Click to copy
--rh-space-3xl |
Click to copy
48px |
48px spacer |
var(--rh-space-3xl, 48px)
https://ux.redhat.com/tokens/space/#rh-space-3xl
|
| 64 |
Click to copy
--rh-space-4xl |
Click to copy
64px |
64px spacer |
var(--rh-space-4xl, 64px)
https://ux.redhat.com/tokens/space/#rh-space-4xl
|
| 80 |
Click to copy
--rh-space-5xl |
Click to copy
80px |
80px spacer |
var(--rh-space-5xl, 80px)
https://ux.redhat.com/tokens/space/#rh-space-5xl
|
| 96 |
Click to copy
--rh-space-6xl |
Click to copy
96px |
96px spacer |
var(--rh-space-6xl, 96px)
https://ux.redhat.com/tokens/space/#rh-space-6xl
|
| 128 |
Click to copy
--rh-space-7xl |
Click to copy
128px |
128px spacer |
var(--rh-space-7xl, 128px)
https://ux.redhat.com/tokens/space/#rh-space-7xl
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
Other libraries
To learn more about our other libraries, visit this page.
