Skip to main content
An Official Vermont Government Website

Alerts

Use the 'Alerts' feature to convey timely updates or important notifications to website visitors. There are five different alert styles: Informative, Warning, Error, Site Alert, and Success. Each alert has settings where you can choose to display the header and icon, and you can opt to have the alert display is a 'Slim' box.

Usability Guidance

  • Consider next steps. When the user is required to do something in response to an alert, let them know what they need to do, and make that task as easy as possible. Think about how much context to provide with your message. For example, a notification of a system change may require contextual information. Write the message in concise, human-readable language; avoid jargon and computer code.
  • Be respectful and direct. Keep alert language brief and meaningful.
  • Alerts are an opportunity. Users will often read an alert message first, as it is highlighted differently than other page content.
  • Don’t overdo it. Too many notifications will either overwhelm or annoy the user and are likely to be ignored.
  • Understand the user’s context. Don’t include notifications that aren’t related to the user’s current goal.

Please Note: You must be logged in to the State of Vermont website that you are editing to follow the instructions below. 

Create an Alert 

  1. Structure

    Scroll over 'Structure' on the top navigation. 

  2. Block layout

    Scroll over 'Block layout'.

  3. Add custom block

    Select 'Add custom block'.

  4. Alert

    Select the 'Alert' option.

  5. Block Description

    Add a 'Block description'.

  6. Type

    Select the 'Type' of the alert.

  7. Header

    Add a 'Header'. This will be the bold text displayed next to the icon (if included).

  8. Optional: Icon

    Check or un-check the box to 'Include Icon'.

  9. Optional: Include a Header

    Check or un-check the box to 'Include Header'.

  10. Body

    Enter the 'Body' content. This is the text below the header.

  11. Optional: Slim

    Check or un-check the box to make the alert 'Slim'.

  12. Save

    Select 'Save'.

  13. Hide Title

    After saving, a window will open where you will place your alert. Select 'Hide title'. This prevents the 'Block description' from being included in addition to the 'Header'.

  14. Pages

    Enter the name(s) of the 'Pages' on which the alert should be displayed.

  15. Region

    Under 'Region' select the template region you would like to place the alert. Most commonly, an alert appears in the 'Content Top' region.

  16. Save Block

    Select 'Save block'.

  17. Content

    Select 'Content' on the top navigation.

  18. Locate Page

    Locate the page on which you chose to place the alert.

  19. View

    Click on the page title to view the page. Confirm that the alert appears in the 'Content Top' region.

Example Alerts 

Below are examples of the five different Alerts.