Skip to content

Layout

Responsive layout, breakpoints and grids.

Breakpoints

Responsive tokens define breakpoints and media queries. They are based on screen size, not device type. Therefore, a mobile device or tablet will change layout based on breakpoints.

TokenDefault Value
breakpoints.small480px
breakpoints.medium768px
breakpoints.large1208px

Media Queries

TokenDefault Value
mediaQueries.smallAndUp@media screen and (min-width: breakpoints.small)
mediaQueries.mediumAndUp@media screen and (min-width: breakpoints.medium)
mediaQueries.largeAndUp@media screen and (min-width: breakpoints.large)