Media queries tokens
Media
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
Click to copy
--rh-media-xs |
Click to copy
(min-width: 576px) |
Mobile portrait |
var(--rh-media-xs, (min-width: 576px))
https://ux.redhat.com/tokens/media/#rh-media-xs
|
|
Click to copy
--rh-media-sm |
Click to copy
(min-width: 768px) |
Mobile landscape |
var(--rh-media-sm, (min-width: 768px))
https://ux.redhat.com/tokens/media/#rh-media-sm
|
|
Click to copy
--rh-media-md |
Click to copy
(min-width: 992px) |
Tablet portrait |
var(--rh-media-md, (min-width: 992px))
https://ux.redhat.com/tokens/media/#rh-media-md
|
|
Click to copy
--rh-media-lg |
Click to copy
(min-width: 1200px) |
Tablet landscape |
var(--rh-media-lg, (min-width: 1200px))
https://ux.redhat.com/tokens/media/#rh-media-lg
|
|
Click to copy
--rh-media-xl |
Click to copy
(min-width: 1440px) |
Desktop small |
var(--rh-media-xl, (min-width: 1440px))
https://ux.redhat.com/tokens/media/#rh-media-xl
|
|
Click to copy
--rh-media-2xl |
Click to copy
(min-width: 1680px) |
Desktop Large |
var(--rh-media-2xl, (min-width: 1680px))
https://ux.redhat.com/tokens/media/#rh-media-2xl
|
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.
