Utility Classes
Utility Classes documentation
Colours
Brand Primary Colours
| Utility Class | Description |
|---|---|
| .rc-bg-colour--brand1 | Applies background colour of Brand-1 Red |
| .rc-text-colour--brand1 | Applies text colour of Brand-1 Red |
| .rc-border-colour--brand1 | Applies border colour of Brand-1 Red |
| .rc-bg-colour--brand2 | Applies background colour of Brand-2 Grey |
| .rc-bg-colour--brand3 | Applies background colour of Brand-3 White |
| .rc-text-colour--brand3 | Applies text colour of Brand-3 White |
| .rc-bg-colour--brand4 | Applies bg colour of Brand-4 White |
| .rc-text-colour--brand4 | Applies text colour of Brand-4 White |
| .rc-border-colour--brand4 | Applies border colour of Brand-4 White |
Brand Secondary Colours
| Utility Class | Description |
|---|---|
| .rc-bg-colour--interface-dark | Applies background colour of Interface Dark Grey |
| .rc-border-colour--interface | Applies border colour of Interface Light Grey |
| .rc-text-colour--text | Applies text colour of Text Medium Grey |
| .rc-border-colour--text | Applies border colour of Text Medium Grey |
| .rc-text-colour--iconography | Applies text colour of Iconography Medium Grey |
| .rc-text-colour--hyperlink | Applies text colour of Hyperlink Dark Grey |
Brand Tertiary Colours
| Utility Class | Description |
|---|---|
| .rc-text-colour--success | Applies text colour of Success Green |
| .rc-text-colour--error | Applies text colour of Error Red |
| .rc-text-colour--warning | Applies text colour of Warning Orange |
| .rc-text-colour--inactive | Applies text colour of Inactive Light Grey |
| .rc-text-colour--function |
Icon Colours
| Utility Class | Description |
|---|---|
| .rc-iconography | Makes icon grey with transparent background |
| .rc-iconography--xs | Makes extra small icon grey with transparent background |
| .rc-brand1 | Makes icon red with transparent background |
| .rc-brand1--xs | Makes extra small icon red with transparent background |
| .rc-brand3 | Makes icon white with dark grey background |
| .rc-brand3--xs | Makes extra small icon white with dark grey background |
Icons
| Utility Class | Description |
|---|---|
| .rc-actions | adds actions icon |
| .rc-address--xs | adds extra small address icon |
| .rc-address | adds address icon |
| .rc-advice--sm | adds small advice icon |
| .rc-advice | adds advice icon |
| .rc-arrow--xs | adds extra small arrow icon |
| .rc-arrow | adds arrow icon |
| .rc-attachment--xs | adds extra small attachment icon |
| .rc-attachment | adds attachment icon |
| .rc-attention--sm | adds small attention icon |
| .rc-attention--xs | adds extra small attention icon |
| .rc-attention | adds attention icon |
| .rc-back--xs | adds extra small back icon |
| .rc-back | adds back icon |
| .rc-bag--xs | adds extra small bag icon |
| .rc-bag | adds bag icon |
| .rc-basket--sm | adds small basket icon |
| .rc-basket--xs | adds extra small basket icon |
| .rc-basket | adds basket icon |
| .rc-bookmark--xs | adds extra small bookmark icon |
| .rc-bookmark | adds bookmark icon |
| .rc-calendar--xs | adds extra small calendar icon |
| .rc-calendar | adds calendar icon |
| .rc-cart--sm | adds small cart icon |
| .rc-cart--xs | adds extra small cart icon |
| .rc-cart | adds cart icon |
| .rc-cat-tree--sm | adds small cat-tree icon |
| .rc-cat-tree--xs | adds extra small cat-tree icon |
| .rc-cat-tree | adds cat-tree icon |
| .rc-children--sm | adds small children icon |
| .rc-children--xs | adds extra small children icon |
| .rc-children | adds children icon |
| .rc-clock--xs | adds extra small clock icon |
| .rc-clock | adds clock icon |
| .rc-close--sm | adds small close icon |
| .rc-close-error--xs | adds extra small close-error icon |
| .rc-close-success--xs | adds extra small close-success icon |
| .rc-close-warning--xs | adds extra small close-warning icon |
| .rc-close | adds close icon |
| .rc-collapse--xs | adds extra small collapse icon |
| .rc-collapse | adds collapse icon |
| .rc-comment--xs | adds extra small comment icon |
| .rc-comment | adds comment icon |
| .rc-computer--xs | adds extra small computer icon |
| .rc-computer | adds computer icon |
| .rc-confirmation--sm | adds small confirmation icon |
| .rc-deafness--sm | adds small deafness icon |
| .rc-deafness--xs | adds extra small deafness icon |
| .rc-deafness | adds deafness icon |
| .rc-delivery--sm | adds small delivery icon |
| .rc-documents | adds documents icon |
| .rc-down--xs | adds extra small down icon |
| .rc-down | adds down icon |
| .rc-edit--xs | adds extra small edit icon |
| .rc-edit | adds edit icon |
| .rc-email--sm | adds small email icon |
| .rc-email | adds email icon |
| .rc-enjoys-training--sm | adds small enjoys-training icon |
| .rc-enjoys-training--xs | adds extra small enjoys-training icon |
| .rc-enjoys-training | adds enjoys-training icon |
| .rc-error--xs | adds extra small error icon |
| .rc-exercise--sm | adds small exercise icon |
| .rc-exercise--xs | adds extra small exercise icon |
| .rc-exercise | adds exercise icon |
| .rc-expand--xs | adds extra small expand icon |
| .rc-expand | adds expand icon |
| .rc-experience--sm | adds small experience icon |
| .rc-experience--xs | adds extra small experience icon |
| .rc-experience | adds experience icon |
| .rc-external--xs | adds extra small external icon |
| .rc-external | adds external icon |
| .rc-facebook--xs | adds extra small facebook icon |
| .rc-family--sm | adds small family icon |
| .rc-family--xs | adds extra small family icon |
| .rc-family | adds family icon |
| .rc-fast-forward--xs | adds extra small fast-forward icon |
| .rc-fast-forward | adds fast-forward icon |
| .rc-female--xs | adds extra small female icon |
| .rc-female | adds female icon |
| .rc-filter--xs | adds extra small filter icon |
| .rc-filter | adds filter icon |
| .rc-first-time--sm | adds small first-time icon |
| .rc-first-time--xs | adds extra small first-time icon |
| .rc-first-time | adds first-time icon |
| .rc-food--xs | adds extra small food icon |
| .rc-food | adds food icon |
| .rc-food2--xs | adds extra small food2 icon |
| .rc-food2 | adds food2 icon |
| .rc-forward--xs | adds extra small forward icon |
| .rc-forward | adds forward icon |
| .rc-friendly--sm | adds small friendly icon |
| .rc-friendly--xs | adds extra small friendly icon |
| .rc-friendly | adds friendly icon |
| .rc-google-plus--xs | adds extra small google-plus icon |
| .rc-grid-view--sm | adds small grid-view icon |
| .rc-grid-view--xs | adds extra small grid-view icon |
| .rc-grid-view | adds grid-view icon |
| .rc-groomer--xs | adds extra small groomer icon |
| .rc-groomer | adds groomer icon |
| .rc-grooming--sm | adds small grooming icon |
| .rc-grooming--xs | adds extra small grooming icon |
| .rc-grooming | adds grooming icon |
| .rc-guard-dog--sm | adds small guard-dog icon |
| .rc-guard-dog--xs | adds extra small guard-dog icon |
| .rc-guard-dog | adds guard-dog icon |
| .rc-health--xs | adds extra small health icon |
| .rc-health | adds health icon |
| .rc-heat--sm | adds small heat icon |
| .rc-heat--xs | adds extra small heat icon |
| .rc-heat | adds heat icon |
| .rc-help--xs | adds extra small help icon |
| .rc-help | adds help icon |
| .rc-hide--xs | adds extra small hide icon |
| .rc-hide | adds hide icon |
| .rc-home | adds home icon |
| .rc-human-interaction--sm | adds small human-interaction icon |
| .rc-human-interaction--xs | adds extra small human-interaction icon |
| .rc-human-interaction | adds human-interaction icon |
| .rc-hunt--sm | adds small hunt icon |
| .rc-hunt--xs | adds extra small hunt icon |
| .rc-hunt | adds hunt icon |
| .rc-image--xs | adds extra small image icon |
| .rc-image | adds image icon |
| .rc-incompatible--sm | adds small incompatible icon |
| .rc-incompatible--xs | adds extra small incompatible icon |
| .rc-incompatible | adds incompatible icon |
| .rc-indoor-outdoor--sm | adds small indoor-outdoor icon |
| .rc-indoor-outdoor--xs | adds extra small indoor-outdoor icon |
| .rc-indoor-outdoor | adds indoor-outdoor icon |
| .rc-indoors--sm | adds small indoors icon |
| .rc-indoors--xs | adds extra small indoors icon |
| .rc-indoors | adds indoors icon |
| .rc-info--xs | adds extra small info icon |
| .rc-info | adds info icon |
| .rc-instagram--xs | adds extra small instagram icon |
| .rc-knowledge--xs | adds extra small knowledge icon |
| .rc-knowledge | adds knowledge icon |
| .rc-left | adds left icon |
| .rc-like--xs | adds extra small like icon |
| .rc-like | adds like icon |
| .rc-list-view--sm | adds small list-view icon |
| .rc-list-view--xs | adds extra small list-view icon |
| .rc-list-view | adds list-view icon |
| .rc-loading--xs | adds extra small loading icon |
| .rc-loading | adds loading icon |
| .rc-location--xs | adds extra small location icon |
| .rc-location | adds location icon |
| .rc-location2--xs | adds extra small location2 icon |
| .rc-location2 | adds location2 icon |
| .rc-lock--xs | adds extra small lock icon |
| .rc-lock | adds lock icon |
| .rc-low-maintenance--sm | adds small low-maintenance icon |
| .rc-low-maintenance--xs | adds extra small low-maintenance icon |
| .rc-low-maintenance | adds low-maintenance icon |
| .rc-male--xs | adds extra small male icon |
| .rc-male | adds male icon |
| .rc-menu--sm | adds small menu icon |
| .rc-menu | adds menu icon |
| .rc-minus--xs | adds extra small minus icon |
| .rc-minus | adds minus icon |
| .rc-mobile | adds mobile icon |
| .rc-mouse--xs | adds extra small mouse icon |
| .rc-mouse | adds mouse icon |
| .rc-need-space--sm | adds small need-space icon |
| .rc-need-space--xs | adds extra small need-space icon |
| .rc-need-space | adds need-space icon |
| .rc-news--xs | adds extra small news icon |
| .rc-news | adds news icon |
| .rc-no-alone--sm | adds small no-alone icon |
| .rc-no-alone--xs | adds extra small no-alone icon |
| .rc-no-alone | adds no-alone icon |
| .rc-no-garden--sm | adds small no-garden icon |
| .rc-no-garden--xs | adds extra small no-garden icon |
| .rc-no-garden | adds no-garden icon |
| .rc-nutritional--xs | adds extra small nutritional icon |
| .rc-nutritional | adds nutritional icon |
| .rc-outdoor--sm | adds small outdoor icon |
| .rc-outdoor--xs | adds extra small outdoor icon |
| .rc-outdoor | adds outdoor icon |
| .rc-pairs--sm | adds small pairs icon |
| .rc-pairs--xs | adds extra small pairs icon |
| .rc-pairs | adds pairs icon |
| .rc-patient--sm | adds small patient icon |
| .rc-patient--xs | adds extra small patient icon |
| .rc-patient | adds patient icon |
| .rc-pause--xs | adds extra small pause icon |
| .rc-pause | adds pause icon |
| .rc-payment--sm | adds small payment icon |
| .rc-pdf--xs | adds extra small pdf icon |
| .rc-pdf | adds pdf icon |
| .rc-pharmacy--xs | adds extra small pharmacy icon |
| .rc-pharmacy | adds pharmacy icon |
| .rc-pin--sm | adds small pin icon |
| .rc-pin--xs | adds extra small pin icon |
| .rc-pin | adds pin icon |
| .rc-pinterest--xs | adds extra small pinterest icon |
| .rc-play--xs | adds extra small play icon |
| .rc-play | adds play icon |
| .rc-plus--xs | adds extra small plus icon |
| .rc-plus | adds plus icon |
| .rc-print--xs | adds extra small print icon |
| .rc-print | adds print icon |
| .rc-quality--xs | adds extra small quality icon |
| .rc-quality | adds quality icon |
| .rc-quiet-home--sm | adds small quiet-home icon |
| .rc-quiet-home--xs | adds extra small quiet-home icon |
| .rc-quiet-home | adds quiet-home icon |
| .rc-rate--xs | adds extra small rate icon |
| .rc-rate-fill--xs | adds extra small rate-fill icon |
| .rc-rate-fill | adds rate-fill icon |
| .rc-rate | adds rate icon |
| .rc-refresh--xs | adds extra small refresh icon |
| .rc-refresh | adds refresh icon |
| .rc-rewind--xs | adds extra small rewind icon |
| .rc-rewind | adds rewind icon |
| .rc-right--xs | adds extra small right icon |
| .rc-right | adds right icon |
| .rc-rss--xs | adds extra small rss icon |
| .rc-rss | adds rss icon |
| .rc-search--sm | adds small search icon |
| .rc-search | adds search icon |
| .rc-settings--xs | adds extra small settings icon |
| .rc-settings | adds settings icon |
| .rc-share--xs | adds extra small share icon |
| .rc-share | adds share icon |
| .rc-shelter--xs | adds extra small shelter icon |
| .rc-shelter | adds shelter icon |
| .rc-shop--xs | adds extra small shop icon |
| .rc-shop | adds shop icon |
| .rc-show--xs | adds extra small show icon |
| .rc-show | adds show icon |
| .rc-skip--xs | adds extra small skip icon |
| .rc-skip | adds skip icon |
| .rc-sm-home--sm | adds small sm-home icon |
| .rc-sm-home--xs | adds extra small sm-home icon |
| .rc-sm-home | adds sm-home icon |
| .rc-sporting--sm | adds small sporting icon |
| .rc-sporting--xs | adds extra small sporting icon |
| .rc-sporting | adds sporting icon |
| .rc-startled--sm | adds small startled icon |
| .rc-startled--xs | adds extra small startled icon |
| .rc-startled | adds startled icon |
| .rc-stop--xs | adds extra small stop icon |
| .rc-stop | adds stop icon |
| .rc-success--xs | adds extra small success icon |
| .rc-sustainable--xs | adds extra small sustainable icon |
| .rc-sustainable | adds sustainable icon |
| .rc-tablet--xs | adds extra small tablet icon |
| .rc-tablet | adds tablet icon |
| .rc-text-decrease--xs | adds extra small text-decrease icon |
| .rc-text-decrease | adds text-decrease icon |
| .rc-text-increase--xs | adds extra small text-increase icon |
| .rc-text-increase | adds text-increase icon |
| .rc-tick--xs | adds extra small tick icon |
| .rc-training--sm | adds small training icon |
| .rc-training--xs | adds extra small training icon |
| .rc-training | adds training icon |
| .rc-twitter--xs | adds extra small twitter icon |
| .rc-unlock--xs | adds extra small unlock icon |
| .rc-unlock | adds unlock icon |
| .rc-up | adds up icon |
| .rc-user--sm | adds small user icon |
| .rc-user-add--xs | adds extra small user-add icon |
| .rc-user-add | adds user-add icon |
| .rc-user | adds user icon |
| .rc-versatile--sm | adds small versatile icon |
| .rc-versatile--xs | adds extra small versatile icon |
| .rc-versatile | adds versatile icon |
| .rc-vet--xs | adds extra small vet icon |
| .rc-vet | adds vet icon |
| .rc-video--xs | adds extra small video icon |
| .rc-video | adds video icon |
| .rc-volume-off--xs | adds extra small volume-off icon |
| .rc-volume-off | adds volume-off icon |
| .rc-volume-on--xs | adds extra small volume-on icon |
| .rc-volume-on | adds volume-on icon |
| .rc-warning--xs | adds extra small warning icon |
| .rc-watchdog--sm | adds small watchdog icon |
| .rc-watchdog--xs | adds extra small watchdog icon |
| .rc-watchdog | adds watchdog icon |
| .rc-weight--xs | adds extra small weight icon |
| .rc-weight | adds weight icon |
| .rc-youtube--xs | adds extra small youtube icon |
Breakpoint Utilities
Max Widths
| 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
| 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
| 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. |
Layout Container
| Utility Class | Description |
|---|---|
| .rc-one-column | This column will be 1/1 width of its container |
| .rc-two-column | This column will be 1/2 width of its container |
| .rc-three-column | This column will be 1/3 width of its container |
| .rc-four-column | This column will be 1/4 width of its container |
| .rc-five-column | This column will be 1/5 width of its container |
Layout Modifiers
| Utility Class | Description |
|---|---|
| .rc-double-width | This column will be 2X the column width. |
| .rc-triple-width | This column will be 3X the column width. |
| .rc-quad-width | This column will be 4X the column width. |
| .rc-stacked | Stack columns on top of one another within a layout container |
| .rc-reverse-layout | Note how in the DOM the right-hand side item is actually first |
| .rc-reverse-layout-mobile | Same as the above but only activated at the mobile breakpoints |
| .rc-match-heights | Forces the height of the columns to match their siblings |
| .rc-flex-start | Align components to the start - particularly for multi column horizontal layouts |
| .rc-flex-end | Align components to the end - particularly for multi column horizontal layouts |
| .rc-flex-direction--reverse--(breakpoint) | Reverses order of components - requires breakpoint and direction from which to take effect (For example rc-flex-direction--reverse--md-up reverses components at the md breakpoint and all larger sizes) |
| .rc-self-h-bottom | Align only this column to the bottom of the container |
| .rc-self-h-top | Align only this column to the top of the container |
| .rc-self-h-middle | Align only this column to the middle of the container |
Layout Modifiers
| Utility Class | Description |
|---|---|
| .rc-content-h-top | Align content horizontally to the top of the container |
| .rc-content-h-bottom | Align content horizontally to the bottom of the container |
| .rc-content-h-middle | Align content horizontally to the middle of the container |
Alignment Utilities
| Utility Class | Description |
|---|---|
| .rc-content-v-left | Align content to the left of the container |
| .rc-content-v-middle | Align content to the middle of the container |
| .rc-content-v-right | Align content to the right of the container |
Spacers
Padding
| Utility Class | Description |
|---|---|
| .rc-padding--lg | Adds large padding top, left, bottom, right of any given element. |
| .rc-padding--md | Adds medium padding top, left, bottom, right of any given element. |
| .rc-padding--sm | Adds small padding top, left, bottom, right of any given element. |
| .rc-padding--xs | Adds extra small padding top, left, bottom, right of any given element. |
| .rc-padding--none | Clears padding top, left, bottom, right on any given element. |
| .rc-padding-x--lg | Adds large padding left & right of any given element. |
| .rc-padding-x--md | Adds medium padding left & right of any given element. |
| .rc-padding-x--sm | Adds small padding left & right of any given element. |
| .rc-padding-x--xs | Adds extra small padding left & right of any given element. |
| .rc-padding-x--none | Clears padding left & right on any given element. |
| .rc-padding-y--lg | Adds large padding top & bottom of any given element. |
| .rc-padding-y--md | Adds medium padding top & bottom of any given element. |
| .rc-padding-y--sm | Adds small padding top & bottom of any given element. |
| .rc-padding-y--xs | Adds extra small padding top & bottom of any given element. |
| .rc-padding-y--none | Clears padding top & bottom on any given element. |
| .rc-padding-top--lg | Adds large padding to the top side of an element. |
| .rc-padding-top--md | Adds medium padding to the top side of an element. |
| .rc-padding-top--sm | Adds small padding to the top side of an element. |
| .rc-padding-top--xs | Adds extra small padding to the top side of an element. |
| .rc-padding-left--lg | Adds large padding to the left side of an element. |
| .rc-padding-left--md | Adds medium padding to the left side of an element. |
| .rc-padding-left--sm | Adds small padding to the left side of an element. |
| .rc-padding-left--xs | Adds extra small padding to the left side of an element. |
| .rc-padding-bottom--lg | Adds large padding to the bottom side of an element. |
| .rc-padding-bottom--md | Adds medium padding to the bottom side of an element. |
| .rc-padding-bottom--sm | Adds small padding to the bottom side of an element. |
| .rc-padding-bottom--xs | Adds extra small padding to the bottom side of an element. |
| .rc-padding-right--lg | Adds large padding to the right side of an element. |
| .rc-padding-right--md | Adds medium padding to the right side of an element. |
| .rc-padding-right--sm | Adds small padding to the right side of an element. |
| .rc-padding-right--xs | Adds extra small padding to the right side of an element. |
| .rc-padding-top--none | Clears padding to the top side of an element. |
| .rc-padding-left--none | Clears padding to the left side of an element. |
| .rc-padding-bottom--none | Clears padding to the bottom side of an element. |
| .rc-padding-right--none | Clears padding to the right side of an element. |
| .rc-padding-top--lg--mobile | Adds large padding to the top side of an element on screens smaller than 769px wide. |
| .rc-padding-top--md--mobile | Adds medium padding to the top side of an element on screens smaller than 769px wide. |
| .rc-padding-top--sm--mobile | Adds small padding to the top side of an element on screens smaller than 769px wide. |
| .rc-padding-top--xs--mobile | Adds extra small padding to the top side of an element on screens smaller than 769px wide. |
| .rc-padding-left--lg--mobile | Adds large padding to the left side of an element on screens smaller than 769px wide. |
| .rc-padding-left--md--mobile | Adds medium padding to the left side of an element on screens smaller than 769px wide. |
| .rc-padding-left--sm--mobile | Adds small padding to the left side of an element on screens smaller than 769px wide. |
| .rc-padding-left--xs--mobile | Adds extra small padding to the left side of an element on screens smaller than 769px wide. |
| .rc-padding-bottom--lg--mobile | Adds large padding to the bottom side of an element on screens smaller than 769px wide. |
| .rc-padding-bottom--md--mobile | Adds medium padding to the bottom side of an element on screens smaller than 769px wide. |
| .rc-padding-bottom--sm--mobile | Adds small padding to the bottom side of an element on screens smaller than 769px wide. |
| .rc-padding-bottom--xs--mobile | Adds extra small padding to the bottom side of an element on screens smaller than 769px wide. |
| .rc-padding-right--lg--mobile | Adds large padding to the right side of an element on screens smaller than 769px wide. |
| .rc-padding-right--md--mobile | Adds medium padding to the right side of an element on screens smaller than 769px wide. |
| .rc-padding-right--sm--mobile | Adds small padding to the right side of an element on screens smaller than 769px wide. |
| .rc-padding-right--xs--mobile | Adds extra small padding to the right side of an element on screens smaller than 769px wide. |
| .rc-padding-top--lg--desktop | Adds large padding to the top side of an element on screens bigger than 769px wide. |
| .rc-padding-top--md--desktop | Adds medium padding to the top side of an element on screens bigger than 769px wide. |
| .rc-padding-top--sm--desktop | Adds small padding to the top side of an element on screens bigger than 769px wide. |
| .rc-padding-top--xs--desktop | Adds extra small padding to the top side of an element on screens bigger than 769px wide. |
| .rc-padding-left--lg--desktop | Adds large padding to the left side of an element on screens bigger than 769px wide. |
| .rc-padding-left--md--desktop | Adds medium padding to the left side of an element on screens bigger than 769px wide. |
| .rc-padding-left--sm--desktop | Adds small padding to the left side of an element on screens bigger than 769px wide. |
| .rc-padding-left--xs--desktop | Adds extra small padding to the left side of an element on screens bigger than 769px wide. |
| .rc-padding-bottom--lg--desktop | Adds large padding to the bottom side of an element on screens bigger than 769px wide. |
| .rc-padding-bottom--md--desktop | Adds medium padding to the bottom side of an element on screens bigger than 769px wide. |
| .rc-padding-bottom--sm--desktop | Adds small padding to the bottom side of an element on screens bigger than 769px wide. |
| .rc-padding-bottom--xs--desktop | Adds extra small padding to the bottom side of an element on screens bigger than 769px wide. |
| .rc-padding-right--lg--desktop | Adds large padding to the right side of an element on screens bigger than 769px wide. |
| .rc-padding-right--md--desktop | Adds medium padding to the right side of an element on screens bigger than 769px wide. |
| .rc-padding-right--sm--desktop | Adds small padding to the right side of an element on screens bigger than 769px wide. |
| .rc-padding-right--xs--desktop | Adds extra small padding to the right side of an element on screens bigger than 769px wide. |
| .rc-padding-x--lg--mobile | Adds large padding left & right of an element on screens smaller than 769px wide. |
| .rc-padding-x--md--mobile | Adds medium padding left & right of an element on screens smaller than 769px wide. |
| .rc-padding-x--sm--mobile | Adds small padding left & right of an element on screens smaller than 769px wide. |
| .rc-padding-x--xs--mobile | Adds extra small padding left & right of an element on screens smaller than 769px wide. |
| .rc-padding-x--lg--desktop | Adds large padding left & right of an element on screens bigger than 769px wide. |
| .rc-padding-x--md--desktop | Adds medium padding left & right of an element on screens bigger than 769px wide. |
| .rc-padding-x--sm--desktop | Adds small padding left & right of an element on screens bigger than 769px wide. |
| .rc-padding-x--xs--desktop | Adds extra small padding left & right of an element on screens bigger than 769px wide. |
| .rc-padding-y--lg--mobile | Adds large padding top & bottom of an element on screens smaller than 769px wide. |
| .rc-padding-y--md--mobile | Adds medium padding top & bottom of an element on screens smaller than 769px wide. |
| .rc-padding-y--sm--mobile | Adds small padding top & bottom of an element on screens smaller than 769px wide. |
| .rc-padding-y--xs--mobile | Adds extra small padding top & bottom of an element on screens smaller than 769px wide. |
| .rc-padding-y--lg--desktop | Adds large padding top & bottom of an element on screens bigger than 769px wide. |
| .rc-padding-y--md--desktop | Adds medium padding top & bottom of an element on screens bigger than 769px wide. |
| .rc-padding-y--sm--desktop | Adds small padding top & bottom of an element on screens bigger than 769px wide. |
| .rc-padding-y--xs--desktop | Adds extra small padding top & bottom of an element on screens bigger than 769px wide. |
| .rc-padding-top--none--mobile | Clears padding on the top side of an element on screens smaller than 769px wide. |
| .rc-padding-left--none--mobile | Clears padding on the left side of an element on screens smaller than 769px wide. |
| .rc-padding-bottom--none--mobile | Clears padding on the bottom side of an element on screens smaller than 769px wide. |
| .rc-padding-right--none--mobile | Clears padding on the right side of an element on screens smaller than 769px wide. |
| .rc-padding-top--none--desktop | Clears padding on the top side of an element on screens bigger than 769px wide. |
| .rc-padding-left--none--desktop | Clears padding on the left side of an element on screens bigger than 769px wide. |
| .rc-padding-bottom--none--desktop | Clears padding on the bottom side of an element on screens bigger than 769px wide. |
| .rc-padding-right--none--desktop | Clears padding on the right side of an element on screens bigger than 769px wide. |
Margin
| Utility Class | Description |
|---|---|
| .rc-margin--lg | Adds large margin top, left, bottom, right of any given element. |
| .rc-margin--md | Adds medium margin top, left, bottom, right of any given element. |
| .rc-margin--sm | Adds small margin top, left, bottom, right of any given element. |
| .rc-margin--xs | Adds extra small margin top, left, bottom, right of any given element. |
| .rc-margin--none | Clears margin top, left, bottom, right on any given element. |
| .rc-margin-x--lg | Adds large margin left & right of any given element. |
| .rc-margin-x--md | Adds medium margin left & right of any given element. |
| .rc-margin-x--sm | Adds small margin left & right of any given element. |
| .rc-margin-x--xs | Adds extra small margin left & right of any given element. |
| .rc-margin-x--none | Clears margin left & right on any given element. |
| .rc-margin-y--lg | Adds large margin top & bottom of any given element. |
| .rc-margin-y--md | Adds medium margin top & bottom of any given element. |
| .rc-margin-y--sm | Adds small margin top & bottom of any given element. |
| .rc-margin-y--xs | Adds extra small margin top & bottom of any given element. |
| .rc-margin-y--none | Clears margin top & bottom on any given element. |
| .rc-margin-top--lg | Adds large margin to the top side of an element. |
| .rc-margin-top--md | Adds medium margin to the top side of an element. |
| .rc-margin-top--sm | Adds small margin to the top side of an element. |
| .rc-margin-top--xs | Adds extra small margin to the top side of an element. |
| .rc-margin-left--lg | Adds large margin to the left side of an element. |
| .rc-margin-left--md | Adds medium margin to the left side of an element. |
| .rc-margin-left--sm | Adds small margin to the left side of an element. |
| .rc-margin-left--xs | Adds extra small margin to the left side of an element. |
| .rc-margin-bottom--lg | Adds large margin to the bottom side of an element. |
| .rc-margin-bottom--md | Adds medium margin to the bottom side of an element. |
| .rc-margin-bottom--sm | Adds small margin to the bottom side of an element. |
| .rc-margin-bottom--xs | Adds extra small margin to the bottom side of an element. |
| .rc-margin-right--lg | Adds large margin to the right side of an element. |
| .rc-margin-right--md | Adds medium margin to the right side of an element. |
| .rc-margin-right--sm | Adds small margin to the right side of an element. |
| .rc-margin-right--xs | Adds extra small margin to the right side of an element. |
| .rc-margin-top--none | Clears margin to the top side of an element. |
| .rc-margin-left--none | Clears margin to the left side of an element. |
| .rc-margin-bottom--none | Clears margin to the bottom side of an element. |
| .rc-margin-right--none | Clears margin to the right side of an element. |
| .rc-margin-top--lg--mobile | Adds large margin to the top side of an element on screens smaller than 769px wide. |
| .rc-margin-top--md--mobile | Adds medium margin to the top side of an element on screens smaller than 769px wide. |
| .rc-margin-top--sm--mobile | Adds small margin to the top side of an element on screens smaller than 769px wide. |
| .rc-margin-top--xs--mobile | Adds extra small margin to the top side of an element on screens smaller than 769px wide. |
| .rc-margin-left--lg--mobile | Adds large margin to the left side of an element on screens smaller than 769px wide. |
| .rc-margin-left--md--mobile | Adds medium margin to the left side of an element on screens smaller than 769px wide. |
| .rc-margin-left--sm--mobile | Adds small margin to the left side of an element on screens smaller than 769px wide. |
| .rc-margin-left--xs--mobile | Adds extra small margin to the left side of an element on screens smaller than 769px wide. |
| .rc-margin-bottom--lg--mobile | Adds large margin to the bottom side of an element on screens smaller than 769px wide. |
| .rc-margin-bottom--md--mobile | Adds medium margin to the bottom side of an element on screens smaller than 769px wide. |
| .rc-margin-bottom--sm--mobile | Adds small margin to the bottom side of an element on screens smaller than 769px wide. |
| .rc-margin-bottom--xs--mobile | Adds extra small margin to the bottom side of an element on screens smaller than 769px wide. |
| .rc-margin-right--lg--mobile | Adds large margin to the right side of an element on screens smaller than 769px wide. |
| .rc-margin-right--md--mobile | Adds medium margin to the right side of an element on screens smaller than 769px wide. |
| .rc-margin-right--sm--mobile | Adds small margin to the right side of an element on screens smaller than 769px wide. |
| .rc-margin-right--xs--mobile | Adds extra small margin to the right side of an element on screens smaller than 769px wide. |
| .rc-margin-top--lg--desktop | Adds large margin to the top side of an element on screens bigger than 769px wide. |
| .rc-margin-top--md--desktop | Adds medium margin to the top side of an element on screens bigger than 769px wide. |
| .rc-margin-top--sm--desktop | Adds small margin to the top side of an element on screens bigger than 769px wide. |
| .rc-margin-top--xs--desktop | Adds extra small margin to the top side of an element on screens bigger than 769px wide. |
| .rc-margin-left--lg--desktop | Adds large margin to the left side of an element on screens bigger than 769px wide. |
| .rc-margin-left--md--desktop | Adds medium margin to the left side of an element on screens bigger than 769px wide. |
| .rc-margin-left--sm--desktop | Adds small margin to the left side of an element on screens bigger than 769px wide. |
| .rc-margin-left--xs--desktop | Adds extra small margin to the left side of an element on screens bigger than 769px wide. |
| .rc-margin-bottom--lg--desktop | Adds large margin to the bottom side of an element on screens bigger than 769px wide. |
| .rc-margin-bottom--md--desktop | Adds medium margin to the bottom side of an element on screens bigger than 769px wide. |
| .rc-margin-bottom--sm--desktop | Adds small margin to the bottom side of an element on screens bigger than 769px wide. |
| .rc-margin-bottom--xs--desktop | Adds extra small margin to the bottom side of an element on screens bigger than 769px wide. |
| .rc-margin-right--lg--desktop | Adds large margin to the right side of an element on screens bigger than 769px wide. |
| .rc-margin-right--md--desktop | Adds medium margin to the right side of an element on screens bigger than 769px wide. |
| .rc-margin-right--sm--desktop | Adds small margin to the right side of an element on screens bigger than 769px wide. |
| .rc-margin-right--xs--desktop | Adds extra small margin to the right side of an element on screens bigger than 769px wide. |
| .rc-margin-x--lg--mobile | Adds large margin left & right of an element on screens smaller than 769px wide. |
| .rc-margin-x--md--mobile | Adds medium margin left & right of an element on screens smaller than 769px wide. |
| .rc-margin-x--sm--mobile | Adds small margin left & right of an element on screens smaller than 769px wide. |
| .rc-margin-x--xs--mobile | Adds extra small margin left & right of an element on screens smaller than 769px wide. |
| .rc-margin-x--lg--desktop | Adds large margin left & right of an element on screens bigger than 769px wide. |
| .rc-margin-x--md--desktop | Adds medium margin left & right of an element on screens bigger than 769px wide. |
| .rc-margin-x--sm--desktop | Adds small margin left & right of an element on screens bigger than 769px wide. |
| .rc-margin-x--xs--desktop | Adds extra small margin left & right of an element on screens bigger than 769px wide. |
| .rc-margin-y--lg--mobile | Adds large margin top & bottom of an element on screens smaller than 769px wide. |
| .rc-margin-y--md--mobile | Adds medium margin top & bottom of an element on screens smaller than 769px wide. |
| .rc-margin-y--sm--mobile | Adds small margin top & bottom of an element on screens smaller than 769px wide. |
| .rc-margin-y--xs--mobile | Adds extra small margin top & bottom of an element on screens smaller than 769px wide. |
| .rc-margin-y--lg--desktop | Adds large margin top & bottom of an element on screens bigger than 769px wide. |
| .rc-margin-y--md--desktop | Adds medium margin top & bottom of an element on screens bigger than 769px wide. |
| .rc-margin-y--sm--desktop | Adds small margin top & bottom of an element on screens bigger than 769px wide. |
| .rc-margin-y--xs--desktop | Adds extra small margin top & bottom of an element on screens bigger than 769px wide. |
| .rc-margin-top--none--mobile | Clears margin on the top side of an element on screens smaller than 769px wide. |
| .rc-margin-left--none--mobile | Clears margin on the left side of an element on screens smaller than 769px wide. |
| .rc-margin-bottom--none--mobile | Clears margin on the bottom side of an element on screens smaller than 769px wide. |
| .rc-margin-right--none--mobile | Clears margin on the right side of an element on screens smaller than 769px wide. |
| .rc-margin-top--none--desktop | Clears margin on the top side of an element on screens bigger than 769px wide. |
| .rc-margin-left--none--desktop | Clears margin on the left side of an element on screens bigger than 769px wide. |
| .rc-margin-bottom--none--desktop | Clears margin on the bottom side of an element on screens bigger than 769px wide. |
| .rc-margin-right--none--desktop | Clears margin on the right side of an element on screens bigger than 769px wide. |
Block Styles
Border Styles
| Utility Class | Description |
|---|---|
| .rc-border-all | Border on all sides - top, left, bottom, right |
| .rc-border-top | Border on top side only |
| .rc-border-left | Border on left side only |
| .rc-border-bottom | Border on bottom side only |
| .rc-border-right | Border on right side only |
Border Colours
| Utility Class | Description |
|---|---|
| .rc-border-colour--interface | Applies interface grey colour to border |
| .rc-border-colour--success | Applies success green colour to border |
| .rc-border-colour--warning | Applies warning orange colour to border |
Background Colours
| Utility Class | Description |
|---|---|
| .rc-bg-colour--brand1 | Applies the Brand1 red as a background colour |
| .rc-bg-colour--brand2 | Applies the Brand2 dark grey as a background colour |
| .rc-bg-colour--brand3 | Applies the Brand3 white as a background colour |
| .rc-bg-colour--brand4 | Applies the Brand4 light grey as a background colour |
Shades
| Utility Class | Description |
|---|---|
| .rc-shade--grey | Used to shade an element in dark grey |
| .rc-shade--grey--light | Used to shade an element in light grey |
| .rc-shade--white | Used to shade an element in white |
| .rc-shade--white--light | Used to shade an element in light white |
Shadows
| Utility Class | Description |
|---|---|
| .rc-shadow-black--strong | Applied a strong black box shadow to the element |
| .rc-shadow-black--soft | Applied a soft black box shadow to the element |
| .rc-shadow-black--faint | Applied a faint black box shadow to the element |
| .rc-shadow-grey--inset | Applied a inset grey box shadow to the element |
| .rc-shadow-grey--faint | Applied a faint grey box shadow to the element |
| .rc-shadow-none | Removes all box shadown from the element |