Alert Banner

Shared Partial Name:

wvu-alert-banner

When to Use

Use this when you have an important announcement you want to relay to your users.

Example: Standard Alert Banner

Copy

Content Model and Styling Guidelines

The following guidelines will help ensure your content and styling follow our design principles, and ensures consistency and unity across your pages as well as other WVU-branded websites.

General Guidelines

Be judicious when using this component i.e. use it when there is an emergency or when the message you want to display is of vital importance to your users.

Content-Specific Guidelines

Content	Max Characters	Description
Paragraph*	2-3 Sentences	Put your alert message here.

* Indicates required content.

Shared CleanSlate Partial

Type: Static (uses editable regions)

This component corresponds to the latest version of the shared alert-banner partial in the Design System CleanSlate. CleanSlate developers can use this component by adding a shared partial to a template. Below are the available configuration options for this component.

Code Example

{% render "components/wvu-alert-banner"  %}

PRO TIP: Options that contain integers (1, 2, 3) or boolean values (true, false) don’t need to be wrapped in quotes e.g. limit: 1 or main: true. Strings should be wrapped in quotes e.g. scope: "site".

Configuration

Name	Options	Description
`activate_alert_banner`	`1`	If set to 1, an alert banner will display at the top of your Home page.
`alert_banner_classes`	Any String	The background color and text color utility classes you want to apply to the banner e.g. `alert alert-warning` or `bg-wvu-accent--red text-white`.