R A D I U S

Notice

Use to communicate change, provide feedback as a result of a user’s action or to convey information regarding a potential action.

Description

This component should clearly and succinctly convey the main message, and if applicable, guide the user on the consequence or the best action the user can take next, but without overtaking the page or disrupting the user from performing actions on the page.

They can be either static, dismissable or automatically removed after a fixed period of time.

Notice bars are not “sticky”, so as the user scrolls down, it may disappear out of view. Both static and animated bars will load with the page, so they should show immediately once the page is loaded.

N.B when all variants of this notice component have been built it will be used instead of the current notification component, which is a candidate component that will be deprecated over time in favour of the notice.

Status variations (see subcategories for usage examples and descriptions): All status modifier classes are added to the parent notice component notice notice--<status-modifier>.

Default (general information)
Success - use this to convey something was successfully completed or changed to the user. Usually success and confirmations are straight-forward, so they should be one-line, short and sweet.
Error/failure - use this to convey something was unsuccessful, and requires immediate attention or action. Choose static or temporary animated appropriately based on use case. Try not to have vague copy like “Something went wrong”, but rather informational and actionable copy.
Attention/warning - use this to convey to the user that there is an issue that requires attention, such as a warning or note, that might not require immediate action.
Action - use this to convey to the user that an action is required. This variant can contain CTAs to induce users to take certain actions, such as navigation. CTA's can live inline in the copy as a text link, or below the notification copy as a primary CTA or CTA combo.

Layout and size variations

All modifier classes are added to the parent notice component notice notice--<modifier>.

Default - spans full width of the parent container
Compact - width determined by the content of the notice, rather than the width of the parent element. For notices that require less prominance/attention. Often used to highlight the result of a user action e.g. uploading a document, saving progress in an application or loss of connection.
Small - the small modifier class can be added with any icon to give it a smaller appearance. The icon, title, and text will all display at a smaller font size than the rest of the icons (uses the font(small) mixin)
Spacious - the spacious modifier class can be added to notice components without an icon that require additional whitespace around the copy for a more spacious feel.

To avoid “alert fatigue” (where user starts ignoring alerts and notifications because they see it frequently), please only use a notification bar when it requires user’s attention or action on something.

N.B. When all variants have been built - this component will replace the notification component that is a currently a candidate component and the notification component will be deprecated.

Activate Sass component

In order to have the styling of this component available, you need to include it in your project. After including the Radius library in your main ./index.scss file, add this snippet:

@include radius-component-notice;

Link to Abstract/Sketch file

Download Sketch / Abstract file

Usage

Usage example