Block styles
Styles that can be applied to block level elements/components.
Border types
Borders can be applied using two utility classes, one sets which side to set the border on and the other sets the colour.
Alternatively applying the rc-border--none utility class removes border on an element.
.rc-border-all
<div class="rc-padding--sm rc-border-all rc-border-colour--interface">.rc-border-all</div>Copied!
.rc-border-top
<div class="rc-padding--sm rc-border-top rc-border-colour--interface">.rc-border-top</div>Copied!
.rc-border-bottom
<div class="rc-padding--sm rc-border-bottom rc-border-colour--interface">.rc-border-bottom</div>Copied!
.rc-border-right
<div class="rc-padding--sm rc-border-right rc-border-colour--interface">.rc-border-right</div>Copied!
.rc-border-left
<div class="rc-padding--sm rc-border-left rc-border-colour--interface">.rc-border-left</div>Copied!
.rc-border--none
<div class="rc-padding--sm rc-border--none">.rc-border--none</div>Copied!
Background Colours
Background colours can be applied with the following classes.
rc-bg-colour--brand1
<div class="rc-padding--sm rc-bg-colour--brand1">rc-bg-colour--brand1</div>Copied!
rc-bg-colour--brand2
<div class="rc-padding--sm rc-bg-colour--brand2">rc-bg-colour--brand2</div>Copied!
rc-bg-colour--brand3
<div class="rc-padding--sm rc-bg-colour--brand3">rc-bg-colour--brand3</div>Copied!
rc-bg-colour--brand4
<div class="rc-padding--sm rc-bg-colour--brand4">rc-bg-colour--brand4</div>Copied!
Shades
Element used to obscure everything with a lower z-index.
Shade element - grey
<div class="rc-padding--sm rc-shade rc-shade--grey"></div>Copied!
Shade element - grey light
<div class="rc-padding--sm rc-shade rc-shade--grey--light"></div>Copied!
Shade element - white
<div class="rc-padding--sm rc-shade rc-shade--white"></div>Copied!
Shade element - white light
<div class="rc-padding--sm rc-shade rc-shade--white--light"></div>Copied!
Shadows
Different types of box shadows can be applied with the following classes.
rc-shadow-black--strong
<div class="rc-padding--sm rc-shadow-black--strong">rc-shadow-black--strong</div>Copied!
rc-shadow-black--soft
<div class="rc-padding--sm rc-shadow-black--soft">rc-shadow-black--soft</div>Copied!
rc-shadow-black--faint
<div class="rc-padding--sm rc-shadow-black--faint">rc-shadow-black--faint</div>Copied!
rc-shadow-grey--inset
<div class="rc-padding--sm rc-shadow-grey--inset">rc-shadow-grey--inset</div>Copied!
rc-shadow-grey--faint
<div class="rc-padding--sm rc-shadow-grey--faint">rc-shadow-grey--faint</div>Copied!
rc-shadow-none
<div class="rc-padding--sm rc-shadow-none">rc-shadow-none</div>Copied!