Notice: the Design Language has been migrated - You will find the new URL to call the assets from the current Design Language. See more details regarding this Migration

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.

<aside class="rc-alert" role="alert">
  <span>
    <strong class="rc-font--bold">TIP: </strong>
    Tip alert - 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.

<aside class="rc-alert rc-alert--flat" role="alert">
  <span> Flat alert - 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

<aside class="rc-alert rc-alert--full rc-text--center" role="alert">
  <span> Full width alert - 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.

<aside class="rc-alert rc-alert--with-close" role="alert">
  <span> Close button - 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-alert__close rc-icon rc-icon rc-alert__close rc-close--xs rc-iconography" data-close="">
    <span class="rc-screen-reader-text">Close</span>
  </button>
</aside>

Alert with inline link button

<aside class="rc-alert rc-alert--with-close" role="alert">
  <span>
    Inline link alert - 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="#" aria-label="Links to example page">See more</a>
  </span>
  <button class="rc-alert__close rc-icon rc-icon rc-alert__close rc-close--xs rc-iconography" data-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.

<aside class="rc-alert rc-alert--success rc-alert--with-close" role="alert">
  <span> Success alert - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span>
  <button class="rc-alert__close rc-icon rc-icon rc-close-success--xs" data-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.

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

Error

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