Bridge: Hack4Impact UIUC Design System

Success

Provides a static persistent success message. For when an action/trigger is successful.

This is a success alert!

Warning

Reserved for warnings, messages that require attention or acknowledgement of users, but may not cause errors.

This is a warning alert!

Error

Reserved for errors, malfunctions, and critical issues.

This is an error alert!

Information

Provides contextual information to users. Do not overuse to replace regular content.

This is an information alert!

Adding Elements to Alerts

Links

Links within alerts are set in 18px HK Grotesk SemiBold text (check typography). The link color is the palette's text shade. When hovered, the text is underlined.

This is a success alert! This is an accompanying link.

This is an error alert! This is an accompanying link.

This is a warning alert! This is an accompanying link.

This is an information alert! This is an accompanying link.

Icons

Icons should have even padding (16px) on each side. The icon’s borders should be colorized only using the colors used in the particular instance of an alert. Icons here have a size of 28px/7rem.

This is a success alert! This is an accompanying link.

This is an error alert! This is an accompanying link.

This is a warning alert! This is an accompanying link.

This is an information alert! This is an accompanying link.

Basic Visual Style

Borders

Alerts have a border radius of 14 px and a border width of 1px.

Dimensions

Alerts have vertical padding of 16 px. Width should fill the parent container width.