BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon

Alerts & Messages

Use when it’s important to capture the user’s attention. A variety of message types are available to use in different places.

Top Level Alerts

Use this alert to communicate a general message regarding something wrong on the page or card. These alerts are placed at the top of the page or card.

table type 2


  • Desktop or Tablet: Text align left and message should appear as single line. If message is longer it can have "..." and "More Info" link which can take user to site's relevant section to read full message.

Alert: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ... More info

  • Mobile (container size 420 or below): For small viewport message content can wrap in multiple lines.

Alert: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada... More info

  • Persistent alert:
    • • Is a more general message
    • • Stays on the screen throughout the user’s experience, no matter where he goes within the website
    • • Has no “X” to close

View your other accounts and policies by choosing above.

  • Non-persistent alert:
    • • Is specific to the user’s current interaction
    • • Can be closed with an X, but the alert will remain in the notification center
    • • Is one line (about 50 characters w/o spaces). If longer, has a link to a page with more details

Alert - Payment is due: Click here to make a payment.
Hide Show CSS
                        
       
.ml-msg-container{
	width:100%;
	}

.ml-msg{
	min-height:37px;
	line-height:1.4;
	padding: 8px 0px 8px 0px;
	text-align:left;
	color: #333333;
	margin-bottom:5px;
	font-weight:bold;
}

.ml-msg-left{
	min-height:37px;
	line-height:1.4;
	padding: 8px 0px 8px 0px;
	text-align:left;
	color: #333333;
	margin-bottom:5px;
	
}

.ml-msg-txt{
	display:inline-block;
	margin-left:15px;
	margin-right:10px;
}

/* ============ for mobile =========== */
.msg-indent{
	text-align:left;
	top:0;
	margin-top:-15px;
	margin-bottom:15px;
	padding: 0px 15px 0px 15px;
	
}

.ml-msg img{
	vertical-align:middle;
	margin-top:-5px;
	height:20px;
}

.ml-msg-msg{
	background: #D8EEF9;
}

.ml-msg-error {
	background: #FDE8E8;
	
}

.ml-msg-confirmation {
	background: #EDF5DC;
	
}
.ml-msg-error a{
	color: #0061A0;
	font-weight:bold;
	text-decoration:underline;
}
.ml-msg-error a:hover{
	text-decoration:none;
}

.ml-msg-error-text {
	color:#333333/*#DB1818*/;
	font-weight:700;
}

.high-priority{
	color:#DB1818;
	font-size:18px;
	padding-right:5px;
}
.low-priority{
	color:#0061A0;
	font-size:18px;
	padding-right:5px;
}

.confirmation{
	color:#73982A/*#A4CE4E*/ ;
	font-size:18px;
	padding-right:5px;
}

.ml-msg-close{
	float:right;
	padding: 2px 8px 2px 8px;
	cursor:pointer;
	color:#0061A0;
}

.ml-msg-close:after{
	content:url(/assets/patterns/img/modal/close-icon.svg);
	display:block;
	width:16px;
}

.ml-msg-close:hover:after{
	content:url(/assets/patterns/img/modal/close-icon-hover.svg);
}
        
        
                            
HideShow HTML
                                                

<div class="ml-msg ml-msg-error" >
<span class="ml-msg-txt"><span class="fa fa-exclamation-circle high-priority" ></span>
View your other accounts and policies by choosing <span> <img src="/assets/patterns/img/switch-icon.png" alt=""/></span> above.</span>
</div>

<div class="ml-msg ml-msg-error" id="err1">

<span class="ml-msg-txt"><span class="fa fa-exclamation-circle high-priority" ></span><span class="ml-msg-error-text">Alert - Payment is due:</span> <a href="#">Click here</a> to make a payment. Premium for... <a href="#">More info</a></span><span class="ml-msg-close" ></span>
</div>

Tooltip Alerts:

The tooltip alert should be used when there is an error associated with a piece of data shown within a table. This pattern must be used in conjunction with the Top Level Alert documented above.

Status: Denied

  • Download Associated Javascripts:Zip
  • Download Associated Jquery Files:Zip
Hide Show CSS
                        
       
/* normal tooltip trigger */
.ml-tooltip-trigger.fa  {
	padding:0 5px;
	color:#007ABC;
	font-size:16px;
}

.ml-tooltip-trigger.fa:after{
	content:'\f29c';
}

.ml-tooltip-trigger.fa:hover:after{
	content:'\f059';
}

/* alert tooltip trigger */
.alert.fa{
	color:red;
}
.alert.fa:after{
	content:'\f06a';
}
.alert.fa:hover:after{
	content:'\f06a';
}

/* tooltip style */

.ml-ui-tooltip {
    background: #ffffff !important;
	border: 1px solid #007ABC !important ;
}

.ml-ui-tooltip-alert {
    background: #FDE8E8 !important;
	border: 1px solid #DB1818 !important ;
}

/* tooltip arrow style */

.ml-tooltip-arrow, .ml-tooltip-arrow-alert{
	width: 50px;
	height: 16px;
	overflow: hidden;
	position: absolute;
	left: 50%;
	margin-left: -35px;
	bottom: -16px;
}
.ml-tooltip-arrow.top, .ml-tooltip-arrow-alert.top {
	
	top: -16px;
	bottom: auto;
}
.ml-tooltip-arrow.left, .ml-tooltip-arrow-alert.left {
	
	left: 40%;
}

.ml-tooltip-arrow.right, .ml-tooltip-arrow-alert.right {
	right: auto;
}


.ml-tooltip-arrow:after, .ml-tooltip-arrow-alert:after{
	content: "";
	position: absolute;
	left: 20px;
	top: -20px;
	width: 25px;
	height: 25px;
	box-shadow: 6px 5px 9px -9px black;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.ml-tooltip-arrow.top:after, .ml-tooltip-arrow-alert:after {
	bottom: -20px;
	top: auto;
}

.ml-tooltip-arrow:after{
	background: #ffffff;
	border: 1px solid #007ABC;
}

.ml-tooltip-arrow-alert:after{
	background: #FDE8E8;
	border: 1px solid #DB1818;
}

        
        
                            
HideShow HTML
                                                
<strong>Status: </strong>Denied<span title="Information is needed to process this absence." class="ml-tooltip-trigger alert fa"></span>                              



<!-- Tooltip -->

<script>
$('.ml-msg-close').click(function () {
$(this).parent().hide('fast', function(){ $(this).remove(); });
});

$( function() {
// Alert tooltip

$('.ml-tooltip-trigger.alert').tooltip({
tooltipClass: "ml-ui-tooltip-alert",

position: {
my: "center top+10",
at: "bottom",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "ml-tooltip-arrow-alert" )
.addClass( feedback.vertical)
.addClass( feedback.horizontal)
.appendTo( this );
},

collision: "flipfit"
}
});
});

</script>

Informational Messages

Use when the message is not critical, but is deemed more important than basic instructional copy. For example, at pre-sign in the user sees a message, “Log in to see your accounts.”

Hey! Sample ml-msg-highlight style.
Hide Show CSS
                        
       
.ml-msg-container{
	width:100%;
	}

.ml-msg{
	min-height:37px;
	line-height:1.4;
	padding: 8px 15px 0px 15px;
	text-align:center;
	color: #333333;
	margin-bottom:5px;
	
}

.ml-msg-txt{
	display:inline-block;
	margin-left:15px;
	margin-right:10px;
}
/* ============ for mobile =========== */
.msg-indent{
	text-align:left;
	top:0;
	margin-top:-15px;
	margin-bottom:15px;
	padding: 0px 15px 0px 0;
	
}

.ml-msg img{
	vertical-align:middle;
	margin-top:-5px;
	height:20px;
}

.ml-msg-msg{
	background: #D8EEF9;
}

.ml-msg-error {
	background: #FDE8E8;
	
}
.ml-msg-error a{
	color: #0061A0;
	text-decoration:underline;
}
.ml-msg-error a:hover{
	text-decoration:none;
}

.ml-msg-error-text {
	color:#DB1818;
	font-weight:700;
}

.high-priority{
	color:#DB1818;
	font-size:18px;
	padding-right:5px;
	
}
.low-priority{
	color:#0061A0;
	font-size:18px;
	padding-right:5px;
}

.ml-msg-close{
	
	float:right;
	padding-top: 2px;
	cursor:pointer;
	color:#0061A0;
}
        
        
                            
HideShow HTML
                                                

<div class="ml-msg ml-msg-msg" >
<p><span class="fa fa-info-circle low-priority" ></span>
<strong>Hey!</strong> Sample ml-msg-highlight style.</p>
</div>

Feedback

These alerts or messages appear as a banner at the top of the content (e.g., across a card or form). Form validation message will appear at the top of the form fields.

Validation Message:

These messages appear at the top of the form on submit if there is any issue with input data that needs user correction.

Please check the information below.


Confirmation Message:

These messages appear at the top of the page or card and communicate the successful submission of a form or completion of an process.

Your claim form has been submitted successfully.


Hide Show CSS
                        
       
.ml-msg-container{
	
	width:100%;
	}

.ml-msg{
	min-height:37px;
	line-height:1.4;
	padding: 8px 0px 8px 0px;
	text-align:left;
	color: #333333;
	margin-bottom:5px;
	
}

.ml-msg-left{
	min-height:37px;
	line-height:1.4;
	padding: 8px 0px 8px 0px;
	text-align:left;
	color: #333333;
	margin-bottom:5px;
	font-weight:bold;
}

.ml-msg-txt{
	display:inline-block;
	margin-left:15px;
	margin-right:10px;
}

/* ============ for mobile =========== */
.msg-indent{
	text-align:left;
	top:0;
	margin-top:-15px;
	margin-bottom:15px;
	padding: 0px 15px 0px 15px;
	
}

.ml-msg img{
	vertical-align:middle;
	margin-top:-5px;
	height:20px;
}

.ml-msg-msg{
	background: #D8EEF9;
}

.ml-msg-error {
	background: #FDE8E8;
	
}

.ml-msg-confirmation {
	background: #EDF5DC;
	
}
.ml-msg-error a{
	color: #0061A0;
	font-weight:bold;
	text-decoration:underline;
}
.ml-msg-error a:hover{
	text-decoration:none;
}

.ml-msg-error-text {
	color:#333333/*#DB1818*/;
	font-weight:700;
}

.high-priority{
	color:#DB1818;
	font-size:18px;
	padding-right:5px;
}
.low-priority{
	color:#0061A0;
	font-size:18px;
	padding-right:5px;
}

.confirmation{
	color:#73982A/*#A4CE4E*/ ;
	font-size:18px;
	padding-right:5px;
}

.ml-msg-close{
	float:right;
	padding: 2px 8px 2px 8px;
	cursor:pointer;
	color:#0061A0;
}

.ml-msg-close:after{
	content:url(/assets/patterns/img/modal/close-icon.svg);
	display:block;
	width:16px;
}

.ml-msg-close:hover:after{
	content:url(/assets/patterns/img/modal/close-icon-hover.svg);
}
        
        
                            
HideShow HTML
                                                

<div class="ml-msg ml-msg-error" >
<span class="ml-msg-txt"><span class="fa fa-exclamation-circle high-priority" ></span>
View your other accounts and policies by choosing <span> <img src="/assets/patterns/img/switch-icon.png" alt=""/></span> above.</span>
</div>

<div class="ml-msg ml-msg-error" id="err1">

<span class="ml-msg-txt"><span class="fa fa-exclamation-circle high-priority" ></span><span class="ml-msg-error-text">Alert - Payment is due:</span> <a href="#">Click here</a> to make a payment. Premium for... <a href="#">More info</a></span><span class="ml-msg-close" ></span>
</div>

Alert Window

Use this style messaging when it makes sense to disrupt the user and force them to read an important message before proceeding. This style message works when you need to communicate with the user as they finish one task and there is something important to communicate to them before navigating them to another destination.

Use when both:

  • • The user must read the message before going further
  • • The message’s text is too long for a banner alert


Click here for working example.

Message Header

This is the default dialog which is useful for displaying any portal level alert information. The dialog window can be closed with the 'x' icon or CLOSE button.





Sample desktop view only. Not to scale.

overlay

  • Download Associated Javascripts:Zip
  • Download Associated Jquery Files:Zip
  • Download Associated Jquery-modal Files:Zip


Hide Show CSS
                        
       
  .blocker {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%;
  overflow: auto;
  z-index: 9999;
  padding: 20px;
  box-sizing: border-box;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.75);
  text-align: center;
}
.blocker:before{
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.05em;
}
.blocker.behind {
  background-color: transparent;
}
.ml-lightbox-container {
  display: none;
  vertical-align: middle;
  position: relative;
  z-index: 2;
  min-height:250px;
  max-height:650px;
  max-width: 750px;
  box-sizing: border-box;
  width: 90%;
  background: #f2f2f2;
  padding: 25px 40px 30px 40px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -o-border-radius: 0px;
  -ms-border-radius: 0px;
  border-radius: 0px;
  -webkit-box-shadow: 0 0 10px #000;
  -moz-box-shadow: 0 0 10px #000;
  -o-box-shadow: 0 0 10px #000;
  -ms-box-shadow: 0 0 10px #000;
  box-shadow: 0 0 10px #000;
  text-align: left;
}

.modal a.close-modal {
  position: absolute;
  top: 20px;
  right: 20px;
  display: block;
  width: 25px;
  height: 25px;
  text-indent: -9999px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image:url(/assets/patterns/img/modal/close-icon.svg);

}

.modal a.close-modal:hover {

  background-image:url(/assets/patterns/img/modal/close-icon-hover.svg);

}

.modal-spinner {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  padding: 12px 16px;
  border-radius: 5px;
  background-color: #111;
  height: 20px;
}

.modal-spinner > div {
  border-radius: 100px;
  background-color: #fff;
  height: 20px;
  width: 2px;
  margin: 0 1px;
  display: inline-block;

  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.modal-spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.modal-spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.modal-spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}


/* ===== Drawer Style   ======= */


.ml-drawer-container{
  top:0;
  left:calc(100% - 320px);
  width: 320px;
  height:100vh;
  display:none;
  vertical-align:middle;
  position:absolute;
  z-index: 2;
  box-sizing: border-box;
  background: #ffffff;
  padding: 60px 20px 0 20px;
  text-align: left;
  overflow:hidden;
 
  
}
.ml-drawer-content{
	height:100%;
	overflow: scroll;
	
}

.ml-drawer-content::last-child{
	margin-bottom:100px;
	
}


a.close-drawer {
  position: absolute;
  top: 20px;
  right: 20px;
  display: block;
  width: 25px;
  height: 25px;
  text-indent: -9999px;
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image:url(/assets/patterns/img/modal/close-icon.svg);

}
a.close-drawer:hover {

  background-image:url(/assets/patterns/img/modal/close-icon-hover.svg);
}

.ml-drawer-action-bar{
	height:80px;
	width:100%;
	background-color:#ffffff;
    padding: 30px 0px 30px 0px;
}

.ml-drawer-action-bar-static{
	bottom:0;
	left:0;
	position:absolute;
	height:80px;
	width:100%;
	background-color:#ffffff;
	vertical-align:bottom;
    padding: 30px 20px 30px 20px;
}

.ml-drawer-action-bar a, .ml-drawer-action-bar-static a{
	margin-right:50px;
}






@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.5) }
  20% { -webkit-transform: scaleY(1.0); }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}



        
        
                            
HideShow HTML
                                                

<!--Model Window Trigger-->
<div> <a href="#ex1" rel="modal:open" class="mlpl-type-strong-link">Click here</a> to open a message. </div><br><br>

<!--Model Window Container-->

<div class="ml-lightbox-container" id="ex1">

<h1 class="header-small align-center"> Message Header </h1>
<p class="align-left">This is the default dialog which is useful for displaying any portal level alert information. The dialog window can be closed with the 'x' icon or CLOSE button. </p><br><br><br><br>

<div class="align-right"><a href="#" rel="modal:close" class="ml-button-primary">Close Window</a></div>
</div>
</div>

<!-- ======== script ======== -->

<script>
$('.ml-msg-close').click(function () {
$(this).parent().hide('fast', function(){ $(this).remove(); });
});
</script>

Global Error Pages

Global errors take over the entire page, and tell the user something went wrong on a page or at the website/portal access level. Commonly-used templates are included below.

  • Page not found (404): Use this template when the user clicks a link or follows a direct URL that is not available.

  • System Timeout: Use this template when the system times out due to a failed server call attempt, etc.

  • Session Timeout: Use this template when the user is in a logged in session, and the session times out due to inactivity.