Breakpoints

Breakpoints are used to define the screen sizes at which your responsive layout will change.

Token
Value
Description
--umrel-breakpoints-xs
639px
Applies to xs screens (e.g. mobile). This value represents a (max-width: 639px).
--umrel-breakpoints-sm
640px
Applies to sm screens (e.g. tablets). This value represents a (min-width: 640px).
--umrel-breakpoints-md
768px
Applies to md screens (e.g. small laptops). This value represents a (min-width: 768px).
--umrel-breakpoints-lg
1024px
Applies to lg screens (e.g. desktops). This value represents a (min-width: 1024px).
--umrel-breakpoints-xl
1440px
Applies to xl screens (e.g. large desktops). This value represents a (min-width: 1440px).