Shade

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

Shade element - grey

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

Shade element - white

html
            <div class="rc-shade rc-shade--white"></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

Changelog

  • 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. https://trello.com/c/H5kTHTkZ/259-copy-change-update-naming-convention-on-sidebar
  • 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