Emergency Banner

The Folwell Emergency Banner component allows users to insert a basic (gold) or emergency (red) banner notification into a page.

Example Emergency Banner

Due to a snowstorm, the campus is closed until further notice. Classes and events are canceled, and only essential services will remain operational. Please check the university website for updates. Learn more

Emphasis Link

 

Button

Example Basic Banner

Traffic delays possible near campus construction zones. Allow extra travel time. Learn more

Emphasis Link

 

Button

Usage

The Folwell Emergency Banner component allows users to insert a basic (gold) or emergency (red) banner notification into a page.

Add an Emergency Banner via Blocks

  1. Go to Content, and select the "Blocks" tab.

    A screenshot showing the top of the custom library page

  2. Click +Add content block and select the Emergency Banner block type from the list of custom blocks.

    Link text that reads "Emergency Banner"

  3. Add a description to the Block description input box.
     

    Description input textbox.

  4. Click the Options dropdown menu and select an option. Basic is a gold banner and Emergency is red.

    Options drop down menu listing value options.

  5. Add your message in the Message input box.
     

    Message text input box.
  6. Click Save

  7. On the Block layout page, navigate to Content and select Place block

    Place block button.

  8. Search for your Emergency Banner block Title, then click Place block.

    Place block configuration window
  9. In the Configure block window, click Save block.

  10. Adjust the position of your block, preferably to the top of the Content section, using the far-left handle.

    Place block window listing multiple blocks
  11. At the bottom of the page, click the Save blocks button.

Add Emergency Banners via Layout Builder

  1. From Layout Builder, select + Add Block 

    A screenshot of a mouse cursor on an "Add Block" button.

  2. In the right-sidebar menu, select + Create content block

    create content block displayed in white text on a dark gray background

  3. Select Emergency Banner Component

    Highlighted button of text reading "Emergency Banner"

  4. The Configure block window will appear with a number of options that can be selected and edited. Type the Title of the Emergency Banner. 

    Title text input box.

  5. The Options dropdown menu allows users to select either a Basic (gold) or Emergency (red) banner 

    A drop-down menu with text options "Basic" and "Emergency" respectively.

  6. The Message input box allows you to add text to your Emergency Banner. Links and buttons can also be included here. 

    Text input box including example text.

  7. Select Add Block and then Save Layout to save your changes, then click View to see the newly added Emergency Banner. 
     

    A yellow emergency website banner and a red emergency website banner.
Best Practice
  • Select a banner option appropriate for the type of alert (emergency or non-emergency).
  • Do not use Folwell Emergency Banner component as a Folwell Callout substitute.
Accessibility
  • Ensure buttons have correct color contrast to avoid accessibility and readability issues.
  • Ensure CTA links and buttons contain alternative text descriptions if used.