C12. Alert Banner

13 Jan 2022

Component finalised

@Japneet Kaur (Deactivated) @Steven Mao (Unlicensed)

BR-1

By default, the alerts banner is placed at the top of the website header

BR-2

Dismiss alert banner

The alerts bar will not be displayed if it has been ‘closed’ (user selects the 'x')

BR-3

The member will only ever view one alert at a time until a new alert is triggered in the CMS.

BR-4

Alert expiry

Alerts will have a start and end date in the CMS and will be visible to the portal user during this period of time. 

The triggered alert will no longer be displayed once :

1. the end date has passed, or

2. the user has 'closed' the alert banner

1

Banner bar

Bar

Y

None

• Choice of colours can be selected in the CMS (for each brand)

2

Banner text

Text

Y

None

• Text is managed in the CMS

• Text is centre aligned

3

Alerts CTA button

Button / Link

N

On load:

• Text is displayed as per style guide for that brand

On hover:

• Text colour changes as per style guide for that brand

On click:

• Text colour changes as per style guide for that brand and text is underlined

• Navigates to the specified target page

4

Close button

Button / Link

N

On hover:

• Icon colour is highlighted as per style guide for that brand

On click:

• Alerts bar closes

• Once closed, the triggered Alerts Bar should no longer appear for the user

  • The Alerts Bar will appear again only when a new Alert is triggered by the CMS user