KAWWA Markup Pattern Library


Editorial

Highlight Block Component Information

  • Class name: (k-highlight-block)
  • Version: 1.0

Add to list

A highlight block text sets off from the main text as a paragraph, or block of text, and is typically distinguished visually using indentation and different typefaces.

Use this component to give a rythm to your text and increase the interest of the reader.

As I wandered about the plaza lost in my gloomy forebodings Tars Tarkas approached me on his way from the audience chamber. His demeanor toward me was unchanged, and he greeted me as though we had not just parted a few moments before.

HTML5 Plain Code

COPY
  1. <div class="k-highlight-block">
  2. 	<p>As I wandered about the plaza lost in my gloomy forebodings Tars Tarkas approached me on his way from the audience chamber. His demeanor toward me was unchanged, and he greeted me as though we had not just parted a few moments before.</p>
  3. </div>

CSS Code

COPY
  1. div.k-highlight-block {
  2. 	width: 90%;
  3. 	max-width: 40em;
  4. 	color: #444;
  5. 	background: #FFF;
  6. 	padding: 0.5em;
  7. 	margin: 2em;
  8. 	border-top: 1px dashed #999;
  9. 	border-bottom: 1px dashed #999;
  10. }
  11. 	div.k-highlight-block p {
  12. 		font: 1em/1.5 open_sansitalic, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  13. 		text-indent: 0;
  14. 	}
  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