KAWWA Markup Pattern Library


Forms

Confirmation Messages Component Information

  • Class name: (k-confirm-messages)
  • Version: 1.0

Add to list

Use this block of information to give the user feedback about a successful action. For example, to confirm that ther user's account has been correctly created.

Confirm

Your account has been created.

You will receive an email of confirmation at the address example@email.com

HTML5 Plain Code

COPY
  1. <div class="k-confirm-messages">
  2. 	<h3>Confirm</h3>
  3. 	<p>Your account has been created.</p>
  4. 	<p><strong>You will receive an email of confirmation at the address example@email.com</strong></p>
  5. </div>

CSS Code

COPY
  1. div.k-confirm-messages {
  2. 	clear: both;
  3. 	text-align: center;
  4. 	color: #363;
  5. 	background: #FFF url(../img/k-theme0/bg_confirm_message.png);
  6. 	padding: 10px;
  7. 	margin-bottom: 2em;
  8. }
  9. 	div.k-confirm-messages h3 {
  10. 		color: #363;
  11. 		background: rgba(207,237,214,.5);
  12.   		margin: 0 10px 21px;
  13. 		border-color: #C00;
  14. 	}
  15. 	div.k-confirm-messages h3:before {content: "\2611 \00A0 ";}
  16. 	div.k-error-messages li {list-style-position: inside;}
  17. 
                                
  18. 
                                

IE Backward Compatibility

In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments:

Top


List of Components

Top

jQuery Feature
jQuery Interactive Feature
Tapestry Integration
Tapestry integration
AngularJS Feature
AngularJS Feature

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce