Alerts

Alerts can be used to showcase success, warning and additional information on pages such as tips or ‘did you know’ information.

Default

Alerts by default appear in page but can also appear and disappear on a page with a specific timeout function.

html
            <aside class="rc-alert" role="alert">
  <span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </span>
</aside>
        

Flat

Alerts can sit within a page. To make sure other element such as dropdowns sit on top, the alert gets a z-index of 0 using the alert--flat class.

html
            <aside class="rc-alert rc-alert--flat" role="alert">
  <span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </span>
</aside>
        

Full width

html
            <aside class="rc-alert rc-alert--full rc-text--center" role="alert">
  <span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </span>
</aside>
        

Close button

Alerts can appear with or without a close icon, giving the user the ability to close an alert once they have read it.

html
            <aside class="rc-alert rc-alert--with-close" role="alert">
  <span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </span>
  <button class="rc-btn rc-alert__close rc-icon rc-close--xs rc-iconography" data-close aria-label="Close"><span class="rc-screen-reader-text">Close</span></button>
</aside>
        

Alert with inline button

html
            <aside class="rc-alert rc-alert--with-close" role="alert">
  <span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    <a class="rc-styled-link" href="#">See more</a>
  </span>
  <button class="rc-btn rc-alert__close rc-icon rc-close--xs rc-iconography" data-close aria-label="Close"><span class="rc-screen-reader-text">Close</span></button>
</aside>
        

Success

Success messages use the brand colour Success for body copy and border, the icon Success and opacity of 15% on the background of the alert to highlight its message and differences to a normal alert state.

html
            <aside class="rc-alert rc-alert--success rc-alert--with-close" role="alert">
  <span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </span>
  <button class="rc-btn rc-alert__close rc-icon rc-close-success--xs" data-close aria-label="Close"><span class="rc-screen-reader-text">Close</span></button>
</aside>
        

Warning

Warning messages use the brand colour Error for body copy and border, the icon Warning and opacity of 15% on the background of the alert to highlight its message and differences to a normal or successful alert state.

html
            <aside class="rc-alert rc-alert--warning rc-alert--with-close" role="alert">
  <span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </span>
  <button class="rc-btn rc-alert__close rc-icon rc-close-warning--xs" data-close aria-label="Close"><span class="rc-screen-reader-text">Close</span></button>
</aside>
        

Error

html
            <aside class="rc-alert rc-alert--error rc-alert--with-close" role="alert">
  <span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </span>
  <button class="rc-btn rc-alert__close rc-icon rc-close-error--xs" data-close aria-label="Close"><span class="rc-screen-reader-text">Close</span></button>
</aside>
        

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

  • 10th April 2018 [ui_assets/elements/alerts.yml]
    Copy and markup udpates and added new html boilerplate
  • 9th April 2018 [ui_assets/elements/alerts.yml]
    Renamed text-centered to text-center as was duplicate class
  • 29th March 2018 [ui_assets/elements/alerts.yml]
    Updated alert documentation
  • 20th March 2018 [ui_assets/elements/alerts.yml]
    Alerts markup
  • 27th February 2018 [ui_assets/elements/alerts.yml]
    Replaced icon classes
  • 4th February 2018 [ui_assets/elements/alerts.yml]
    Update alert classes to use btn--icon
  • 1st February 2018 [ui_assets/elements/alerts.yml]
    Updated icon classes
  • 29th January 2018 [ui_assets/elements/alerts.yml]
    Update button classnames
  • 12th December 2017 [ui_assets/elements/alerts.yml]
    Update colour classnames in code snippets (yml)
  • 1st December 2017 [ui_assets/elements/alerts.yml]
    Restructured folder order.
  • 30th October 2017 [ui_assets/elements/alerts.yml]
    Replaced instance of old close icon
  • 19th October 2017 [ui_assets/elements/alerts.yml]
    Updated alert cross icon class, changed instances of "avatar" to "image--round"
  • 19th October 2017 [ui_assets/elements/alerts.yml]
    Ensured all instances of icons now use rc-icon base class
  • 5th September 2017 [ui_assets/elements/alerts.yml]
    Modal and shades page updates. Layout classes updates.
  • 30th August 2017 [ui_assets/elements/alerts.yml]
    Refactored mentions of black/white icons to use new light/dark naming convention.
  • 30th August 2017 [ui_assets/elements/alerts.yml]
    Update portal to use latest assets 1.3.3.
  • 29th August 2017 [ui_assets/elements/alerts.yml]
    Refactored naming convention used for levels of abstraction. https://trello.com/c/H5kTHTkZ/259-copy-change-update-naming-convention-on-sidebar
  • 24th August 2017 [ui_assets/elements/alerts.yml]
    Include new alter config file.
  • 19th July 2017 [ui_assets/elements/alerts.yml]
    Added associated files to page config for use with git info collection.
  • 15th July 2017 [ui_assets/elements/alerts.yml]
    Git commit message sync improvements. Folder restructure.
  • 11th July 2017 [ui_assets/elements/alerts.yml]
    Added remaining content.