Breakpoints
Responsive size tokens used across layout helpers and story rendering.
Ranges
| Token | Range (px) |
|---|---|
| screen-xs | 0 – 575 |
| screen-sm | 576 – 767 |
| screen-md | 768 – 991 |
| screen-lg | 992 – 1199 |
| screen-xl | 1200 – 1399 |
| screen-xxl | 1400 and above |
Notes
StoryContentapplies these tokens as classes on its root (.story-content-base) based on the rendered width, so inner markup can target them (e.g.,.screen-md .some-block { ... }).- The ranges follow inclusive lower bounds: a width of
576pxissm,768pxismd, etc.