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.

Examples

Alert Heading

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.

Alert Heading

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.

Alert Heading

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.

Alert Heading

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.

Alert Heading

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.

Alert Heading

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.

Alert Heading

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.

Alert Heading

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.

Alert Heading

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.

Customizing and Extending Alerts in the UI Library

We re-implemented Bootstrap’s alerts in our own Accessible Bootstrap Alerts project. As with Bootstrap, we loop through all of the colors in the $theme-colors variable map to create alert variants. Our mixin forces all alert variant styles to have sufficient color contrast ratios for WCAG 2.0 AA, whereas the default Bootstrap mixin may not. The default Bootstrap mixin alert-variant is still available when extending Bootstrap. Developers using alert-variant are responsible for making sure their extensions conform to WCAG 2.0 AA.