Global Alert Component + Content Fragment

Component name: Global Alert

Authors who can use component: any

Templates/page types that can use component: all

Required or optional: optional

1.       From the landing Navigation page, click on Content Fragments.

2. On the left hand panel, select the folder where the CF is needed. It can be used by any pages in this folder. Once selected, click “Create” in the upper righthand corner.

3.  New Content Fragment

1. Location pathfinder: This field shows the URL of the folder selected in Step 2. It does not need to be edited.
2. Content Fragment Model dropdown: Select “Alert.”
3. Properties fields

 i. Title: Optionally provide a title for your Alert. Adding a title automatically creates a name as well.

ii. Name: Provide a name for your Alert. Only mandatory field in Properties.

iii. Description: Optionally provide a description for your Alert.

4. Click “Create and open” to add detail to the Alert CF immediately. Click “Create” to create the Alert and exit the authoring dialog- it can always be edited later.

1.  Alert Type dropdown: Select from Informative, Warning, and Critical.

a. Informative: These alerts are blue, with an information icon. Use neutral alerts for important time-sensitive information. Examples: important dates, recent content updates, new policies or system notifications.

b.  Warning: These alerts are yellow, with an alert icon. Warning alerts tell the user something urgent or help the user avoid a problem. Examples: travel information, content trigger warnings or location closures.

c.  Critical: These alerts are red, with an error warning icon. Critical alerts should only be used for active emergency situations that could pose a health or safety risk. Examples: severe weather threats or natural disasters.

2. Title field: Add a title to display on the Alert.

3. Title Heading Level dropdown: Select from h2 – h6. The Alert can be placed anywhere on a page; choose H-level accordingly.

4. Start Date and Time picker: Select the date and time that the Alert should begin displaying on the page.

5. End Date and Time picker: Select the date and time that the Alert should disappear from the page.

6. Description field: Add a description to display on the Alert. Keep the description short and direct, with 140 characters maximum. Do not add links here- they should go in the link fields below.

7. Link Label field: If adding a CTA, use this field to add a link label to display on the Alert’s CTA button.

8. Internal Link URL: If adding an internal CTA, use the "Add content path" pathfinder to link to another page on the site. This page may contain more information about the Alert’s contents, or may have an action for residents to take. Only one of Internal and External Link URL fields may be filled.

9. External Link URL: If adding an external CTA, add the link here. Only one of Internal and External Link URL fields may be filled.

10. Disable Close selector: If toggled off, the Alert has a close icon, and may be dismissed. If toggled on, the Alert has no close icon, and cannot be dismissed from the page. Default off.

13.   From the top right corner, select Publish.

14. From the Publish 1 Content Fragments modal, select “Publish service” and “Publish.”

15. The Alert CF is now published.

1. From the navigation landing page, click on Experience Fragments. Click through to the Global folder, then Header. Select the checkbox, then the Edit button. On the authoring screen:

a. Option 1- double click on “Drag components here.” A modal titled “Insert New Component” will pop up. Type “Global Alert” in the search bar, or scroll to the Global Alert in the list. Double click to add to page.

b. Option 2- on the left hand rail, navigate to the Components tab. Type “Global Alert” in the search bar, or scroll to the Global Alert in the list. Double click to add to page.

2. With the edit wrench, open the component.

3. Alert Content Fragment pathfinder: Select the Alert which should display on the page.

4. Click “Done.”

5. Drag the Alert to the proper location. It may appear either above or below the Header navigation.

6. The Alert now appears on all pages below the Header. View it before publishing by selecting “View as Published” from the Page Information Menu (in horizontal menu, click icon with 3 slider buttons, and select from dropdown).

1.  A global alert must be contained within a <section> element. The <section> element must have an ARIA role of alert. The alert role is used to communicate an important and usually time-sensitive message to the user. When this role is added to an element, the browser will send out an accessible alert event to assistive technology products which can then notify the user.

2.  The <section> element must have an aria-labelledby attribute that matches the id attribute of the alert title.

3.  If a CTA is included within in alert, the alert should be sequenced programmatically before the X (close) button.

4. The <button> for the X (close) button should have an aria-label attribute set to "Close Alert".

1. Do not use Alerts for emphasis of regular content, such as job postings. Alerts should be used only for timely, urgent notifications.

2. Make sure to keep time-sensitive Alerts up only for the duration of the crisis.

3.  Alerts should describe the impact on the resident, as well as actions they should take.

4.  Limit the amount of text in an Alert. Write concise headings and copy, and include only one link per Alert.

5.  Use a link to direct users to further information if needed.

6. Select a Neutral, Warning, or Critical Global alert depending on the usage of the alert

a. Neutral: Use neutral alerts for important time-sensitive information. For example, important dates, recent content updates, new policies or system notification

b. Warning: Warning alerts tell the user something urgent or help the user avoid a problem. For example, travel information, content trigger warnings or location closures.

c.  Critical: Critical alerts should only be used for active emergency situations that could pose a health or safety risk. For example, severe weather threats or natural disasters.