Alerts

Alert Boxes

Alert boxes have a yellow warning background with text and an icon that help the customer see specific information.

Examples

Your order is not complete until you click the 'Place Order' button.
Once you've completed checking out, an option is provided to upload your art file(s). Remember, your Customer Service Representative will always contact you to confirm your order details before it goes into production.

You are editing a reorder.
Making changes to imprint color(s) or location(s) may incur extra charges.
Extra Charges $445.00

Code
					
<div class="alertBoxFlex displayFlex flexNoWrap">
	<svg class="alertBulb" height="25px" width="25px" aria-hidden="true"><use xlink:href="#svgIcon-hint"></use></svg>
	<p class="alertText">
		<span class="textSemiBold">Your order is not complete until you click the 'Place Order' button.</span><br />
		Once you've completed checking out, an option is provided to upload your art file(s).
		Remember, your Customer Service Representative will always contact you to confirm your order details before it goes into production.<br />
	</p>
</div>
Notes

To make your alert box have red text & icon add the alertWarning class to the alertBoxFlex div and follow the accessibility rules below.

Resources

Sass File(s)/sass/components/_alertbox.scss
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

If adding the alertWarning class, you must also add the following to ensure the warning text is read immediately to the user via screen reader:

  • aria-role="alert"
  • aria-atomic="true"
To Top