Alerts

Notes on Implementation

We do not use Bootstrap’s Alerts component, but implement our own with increased color contrast. The documentation for Bootstrap Alerts is applicable.

Accessibility Notes

If the purpose of the alert is to provide a status message, such as a form error or success message, be sure to include role="alert" on the div. Assistive technology such as screen readers will handle status messages with role="alert" differently depending on how the attribute is applied (i.e. on page load or dynamically). Read Mozilla’s page on Using the Alert Role for more detailed guidance on using alerts.

Adding the Icons

The Alert component uses Font Awesome v4.7 Icons. Add the Font Awesome CDN to your project.

Dismissible Alerts

The Alert component can be turned into a dismissible alert. Follow the Bootstrap Dismissing Alerts documentation to add the behavior.

Note: Use dismissible alerts with care! Users will not be able to view or hear the message after dismissing (without refreshing the page). Keep important messages on the page at all times.

Examples

Sample Heading in yale Theme Color

This is an alert style based on the yale theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

Sample Heading in primary Theme Color

This is an alert style based on the primary theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

Sample Heading in secondary Theme Color

This is an alert style based on the secondary theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

Sample Heading in success Theme Color

This is an alert style based on the success theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

Sample Heading in info Theme Color

This is an alert style based on the info theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

Sample Heading in warning Theme Color

This is an alert style based on the warning theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

Sample Heading in danger Theme Color

This is an alert style based on the danger theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

Sample Heading in light Theme Color

This is an alert style based on the light theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

Sample Heading in dark Theme Color

This is an alert style based on the dark theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.