Skip to main content

Breakpoints

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

Breakpoints tokens
TokenValueDescription
639pxApplies to xs screens (e.g. mobile). This value represents a (max-width: 639px).
640pxApplies to sm screens (e.g. tablets). This value represents a (min-width: 640px).
768pxApplies to md screens (e.g. small laptops). This value represents a (min-width: 768px).
1024pxApplies to lg screens (e.g. desktops). This value represents a (min-width: 1024px).
1440pxApplies to xl screens (e.g. large desktops). This value represents a (min-width: 1440px).