Royal Canin Logo

Working together for the ultimate brand experience

Royal Canin Design Language

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