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.

.rc-border-all
html
            <div class="rc-border-all rc-border-colour--interface">.rc-border-all</div>
        
.rc-border-top
html
            <div class="rc-border-top rc-border-colour--interface">.rc-border-top</div>
        
.rc-border-bottom
html
            <div class="rc-border-bottom rc-border-colour--interface">.rc-border-bottom</div>
        
.rc-border-left
html
            <div class="rc-border-left rc-border-colour--interface">.rc-border-left</div>
        
.rc-border-right
html
            <div class="rc-border-right rc-border-colour--interface">.rc-border-right</div>
        

Background Colours

Background colours can be applied with the following classes.

.rc-bg-colour--brand1
html
            <div class="rc-bg-colour--brand1">.rc-bg-colour--brand1</div>
        
.rc-bg-colour--brand2
html
            <div class="rc-bg-colour--brand2">.rc-bg-colour--brand2</div>
        
.rc-bg-colour--brand3
html
            <div class="rc-bg-colour--brand3">.rc-bg-colour--brand3</div>
        
.rc-bg-colour--brand4
html
            <div class="rc-bg-colour--brand4">.rc-bg-colour--brand4</div>
        

Shadows

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

.rc-shadow-black--strong
html
            <div class="rc-shadow-black--strong rc-padding--sm ">.rc-shadow-black--strong</div>
        
.rc-shadow-black--faint
html
            <div class="rc-shadow-black--faint rc-padding--sm ">.rc-shadow-black--faint</div>
        
.rc-shadow-black--soft
html
            <div class="rc-shadow-black--soft rc-padding--sm ">.rc-shadow-black--soft</div>
        
.rc-shadow-grey--inset
html
            <div class="rc-shadow-grey--inset rc-padding--sm ">.rc-shadow-grey--inset</div>
        
.rc-shadow-grey--faint
html
            <div class="rc-shadow-grey--faint rc-padding--sm ">.rc-shadow-grey--faint</div>
        
.rc-shadow--none
html
            <div class="rc-shadow--none rc-padding--sm ">.rc-shadow--none</div>
        

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo