Breakpoint
Breakpoint
The core of the responsive design.
🎨 Figma: Not available. Layouts should be built on the following width frames:
- Mobile: 375 px wide frame
- Tablet: 768 px wide frame
- Desktop: 1440 px wide frame
💻 Code: The Breakpoint is available as a variable.
Breakpoints define when content should adapt to the viewport size through media queries. Cosmos defines the following values:


cosmos-breakpoint-small
≥ 1px

cosmos-breakpoint-medium
≥ 650px

cosmos-breakpoint-large
≥ 1000px

cosmos-breakpoint-x-large
≥ 1200px

cosmos-breakpoint-xx-large
≥ 1350