Breakpoints tokens
Breakpoint
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
|
Click to copy
--rh-breakpoint-2xs-max |
Click to copy
575px |
Mobile portrait (max-width) |
var(--rh-breakpoint-2xs-max, 575px)
https://ux.redhat.com/tokens/media/#rh-breakpoint-2xs-max
|
|
Click to copy
--rh-breakpoint-xs |
Click to copy
576px |
Mobile portrait |
var(--rh-breakpoint-xs, 576px)
https://ux.redhat.com/tokens/media/#rh-breakpoint-xs
|
|
Click to copy
--rh-breakpoint-xs-max |
Click to copy
767px |
Mobile landscape (max-width) |
var(--rh-breakpoint-xs-max, 767px)
https://ux.redhat.com/tokens/media/#rh-breakpoint-xs-max
|
|
Click to copy
--rh-breakpoint-sm |
Click to copy
768px |
Mobile landscape |
var(--rh-breakpoint-sm, 768px)
https://ux.redhat.com/tokens/media/#rh-breakpoint-sm
|
|
Click to copy
--rh-breakpoint-sm-max |
Click to copy
991px |
Mobile landscape (max-width) |
var(--rh-breakpoint-sm-max, 991px)
https://ux.redhat.com/tokens/media/#rh-breakpoint-sm-max
|
|
Click to copy
--rh-breakpoint-md |
Click to copy
992px |
Tablet portrait |
var(--rh-breakpoint-md, 992px)
https://ux.redhat.com/tokens/media/#rh-breakpoint-md
|
|
Click to copy
--rh-breakpoint-md-max |
Click to copy
1199px |
Tablet portrait (max-width) |
var(--rh-breakpoint-md-max, 1199px)
https://ux.redhat.com/tokens/media/#rh-breakpoint-md-max
|
|
Click to copy
--rh-breakpoint-lg |
Click to copy
1200px |
Tablet landscape |
var(--rh-breakpoint-lg, 1200px)
https://ux.redhat.com/tokens/media/#rh-breakpoint-lg
|
|
Click to copy
--rh-breakpoint-lg-max |
Click to copy
1439px |
Tablet landscape (max-width) |
var(--rh-breakpoint-lg-max, 1439px)
https://ux.redhat.com/tokens/media/#rh-breakpoint-lg-max
|
|
Click to copy
--rh-breakpoint-xl |
Click to copy
1440px |
Desktop small |
var(--rh-breakpoint-xl, 1440px)
https://ux.redhat.com/tokens/media/#rh-breakpoint-xl
|
|
Click to copy
--rh-breakpoint-xl-max |
Click to copy
1679px |
Desktop small (max-width) |
var(--rh-breakpoint-xl-max, 1679px)
https://ux.redhat.com/tokens/media/#rh-breakpoint-xl-max
|
|
Click to copy
--rh-breakpoint-2xl |
Click to copy
1680px |
Desktop large |
var(--rh-breakpoint-2xl, 1680px)
https://ux.redhat.com/tokens/media/#rh-breakpoint-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.
