![](https://images.prismic.io/ebayevo/ZlAPfiol0Zci9aQb_Breakpointtokens.png?auto=format%2Ccompress&rect=0%2C0%2C312%2C312&w=640&fit=max)
Breakpoint tokens
Learn about our breakpoint tokens.
A responsive grid dynamically updates the page layout according to viewport size. The use of a grid allows us to remain consistent throughout our products and platforms.
Use for small to medium screens.
Use for medium to large screens.
Use for large to x-large screens.
Use for x-large screens. The columns are fixed-widths with auto margins from 1680px+. Max design area excluding margins is 1584px wide.
Evolution uses a proportional layout system anchored around a base value of 8px. For detailed and complex components, factors of 2 may be used sparingly to create additional hierarchy. See spacing tokens for more information.
On web, we utilize eight breakpoints for maximum scalability and control over layouts and components. These breakpoints are 320, 512, 768, 1024, 1280, 1440, 1680 and 1920px. Refer to the eBay skin page grid documentation for the latest resources.
Designs need to flex down to 320px and up to 1680px. Through our mobile-first approach, our official support for the smallest viewport width is 320px. However, technically speaking, there is no “minimum” breakpoint required.
Date | Notes |
---|---|
Jun, 2024 |
|
Mar, 2023 |
|
Oct, 2022 |
|
May, 2022 |
|