Breakpoint utilities

Utility classes are provided and can be used to hide and show content based on screen sizes.

Max widths

These classes are used to set a max-width on a container

  • rc-max-width--sm - 300px
  • rc-max-width--md - 768px
  • rc-max-width--lg - 1100px
  • rc-max-width--xl - 1400px
  • rc-max-width--xxl - 1800px

Breakpoint up

These classes are used to only show content on devices which are this size or bigger

  • rc-xs-up - 480px
  • rc-sm-up - 640px
  • rc-md-up - 768px
  • rc-lg-up - 960px
  • rc-xl-up - 1024px
  • rc-xxl-up - 1440px

Breakpoint down

These classes are used to only show content on devices which are this size or smaller

  • rc-xs-down - 480px
  • rc-sm-down - 640px
  • rc-md-down - 768px
  • rc-lg-down - 960px
  • rc-xl-down - 1024px
  • rc-xxl-down - 1440px

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo