Notice: the Design Language has been migrated - You will find the new URL to call the assets from the current Design Language.
See more details regarding this Migration
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
| Utility Class | Description |
|---|---|
| .rc-max-width--sm | Sets a max-width of 300px on the container |
| .rc-max-width--md | Sets a max-width of 768px on the container |
| .rc-max-width--lg | Sets a max-width of 1100px on the container |
| .rc-max-width--xl | Sets a max-width of 1400px on the container |
| .rc-max-width--xxl | Sets a max-width of 1800px on the container |
| .rc-full-width | Sets a max-width of 100% on the container |
Breakpoint Up
These classes are used to set a Breakpoint Up on a container
| Utility Class | Description |
|---|---|
| .rc-xs-up | An element with this class will only show on devices which are 480px wide or wider |
| .rc-sm-up | An element with this class will only show on devices which are 640px wide or wider |
| .rc-md-up | An element with this class will only show on devices which are 768px wide or wider |
| .rc-lg-up | An element with this class will only show on devices which are 960px wide or wider |
| .rc-xl-up | An element with this class will only show on devices which are 1024px wide or wider |
| .rc-xxl-up | An element with this class will only show on devices which are 1440px wide or wider |
Breakpoint Down
These classes are used to set a Breakpoint Down on a container
| Utility Class | Description |
|---|---|
| .rc-xs-down | An element with this class will only show on devices which are 480px wide or smaller |
| .rc-sm-down | An element with this class will only show on devices which are 640px wide or smaller |
| .rc-md-down | An element with this class will only show on devices which are 768px wide or smaller |
| .rc-lg-down | An element with this class will only show on devices which are 960px wide or smaller |
| .rc-xl-down | An element with this class will only show on devices which are 1024px wide or smaller |
| .rc-xxl-down | An element with this class will only show on devices which are 1440px wide or smaller |