KAWWA Markup Pattern Library


Editorial

Notes Component Information

  • Class name: (k-notes)
  • Version: 1.0

Add to list

Notes will allow you to highlight important text.

This is an example of a note...

You may use this block to highlight important content.

HTML5 Plain Code

COPY
  1. <div class="k-notes">
  2. 	<p>This is an example of a note...</p>
  3. 	<p>You may use this block to highlight important content.</p>
  4. </div>

CSS Code

COPY
  1. div.k-notes {
  2. 	clear: both;
  3. 	color: #000;
  4. 	background: #E4E4E4;
  5. 	padding: 1.5rem 2rem;
  6. 	margin-bottom: 4em;
  7. }
  8. 	div.k-notes p {max-width: 40em; line-height: 1.5;}
  9. 	div.k-notes p + p {margin-top: 0.8em;}
  10. 	div.k-notes ul {margin: 1rem 2rem;}
  11. 
                                
  12. 	p + div.k-notes {margin-top: 1em;}
  13. 
                                
  14. 		div.k-article div.k-notes p {margin: 0.18em 0; text-indent: 0;}
  15. 
                                

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