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

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>

.rc-border-top

<div class="rc-padding--sm rc-border-top rc-border-colour--interface">.rc-border-top</div>

.rc-border-bottom

<div class="rc-padding--sm rc-border-bottom rc-border-colour--interface">.rc-border-bottom</div>

.rc-border-right

<div class="rc-padding--sm rc-border-right rc-border-colour--interface">.rc-border-right</div>

.rc-border-left

<div class="rc-padding--sm rc-border-left rc-border-colour--interface">.rc-border-left</div>

.rc-border--none

<div class="rc-padding--sm rc-border--none">.rc-border--none</div>

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>

rc-bg-colour--brand2

<div class="rc-padding--sm rc-bg-colour--brand2">rc-bg-colour--brand2</div>

rc-bg-colour--brand3

<div class="rc-padding--sm rc-bg-colour--brand3">rc-bg-colour--brand3</div>

rc-bg-colour--brand4

<div class="rc-padding--sm rc-bg-colour--brand4">rc-bg-colour--brand4</div>

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>

Shade element - grey light

<div class="rc-padding--sm rc-shade rc-shade--grey--light"></div>

Shade element - white

<div class="rc-padding--sm rc-shade rc-shade--white"></div>

Shade element - white light

<div class="rc-padding--sm rc-shade rc-shade--white--light"></div>

Shadows

Different types of box shadows can be applied with the following classes.

rc-shadow-black--strong

<div class="rc-padding--sm rc-shadow rc-shadow-black--strong">rc-shadow-black--strong</div>

rc-shadow-black--soft

<div class="rc-padding--sm rc-shadow rc-shadow-black--soft">rc-shadow-black--soft</div>

rc-shadow-black--faint

<div class="rc-padding--sm rc-shadow rc-shadow-black--faint">rc-shadow-black--faint</div>

rc-shadow-grey--inset

<div class="rc-padding--sm rc-shadow rc-shadow-grey--inset">rc-shadow-grey--inset</div>

rc-shadow-grey--faint

<div class="rc-padding--sm rc-shadow rc-shadow-grey--faint">rc-shadow-grey--faint</div>

rc-shadow-none

<div class="rc-padding--sm rc-shadow rc-shadow-none">rc-shadow-none</div>