Skip to main content

Breakpoints

Responsive size tokens used across layout helpers and story rendering.

Ranges

TokenRange (px)
screen-xs0575
screen-sm576767
screen-md768991
screen-lg9921199
screen-xl12001399
screen-xxl1400 and above

Notes

  • StoryContent applies 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 576px is sm, 768px is md, etc.