Element used to obscure everything with a lower z-index.

Shade element - grey

            <div class="rc-shade rc-shade--grey"></div>

Shade element - white

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


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

Github Octocat


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


  • 18th September 2018 [ui_assets/elements/shade.yml]
    Add new type of shader, and fix markup preview
  • 12th July 2018 [ui_assets/elements/shade.yml]
    Prefixed classes throughout the portal with rc-.
  • 8th March 2018 [ui_assets/elements/shade.yml]
    Ordered elements alpabetically
  • 19th February 2018 [ui_assets/elements/shade.yml]
    Convert all multi line text to use
  • 1st December 2017 [ui_assets/elements/shade.yml]
    Reorganised elements navigation
  • 1st December 2017 [ui_assets/elements/shade.yml]
    Restructured folder order.
  • 5th September 2017 [ui_assets/elements/shade.yml]
    Modal and shades page updates. Layout classes updates.
  • 29th August 2017 [ui_assets/elements/shade.yml]
    Refactored naming convention used for levels of abstraction.
  • 25th August 2017 [ui_assets/elements/shade.yml]
    Added search input page. Improved inputs to conform to xhtml. Added shade page. Added footer sub-navigation page. Moved footer into navigation