Working together for the ultimate brand experience

Royal Canin Design Language

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
  • rc-full-width - 100%

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