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>
        

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