KAWWA Markup Pattern Library


Editorial

Introduction Component Information

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

Add to list

Use this component for introductory text, mainly for articles or posts.

Example of introductory paragraph... You may add as much paragraphs as you need to.

Far better that we save friendly bullets for ourselves at the last moment, as did those brave frontier women of my lost land, who took their own lives rather than fall into the hands of the Indian braves.

HTML5 Plain Code

COPY
  1. <div class="k-intro">
  2.     <p>Example of introductory paragraph... You may add as much paragraphs as you need to.</p>
  3.     <p>Far better that we save friendly bullets for ourselves at the last moment, as did  
  4.         those brave frontier women of my lost land, who took their own lives rather than 
  5.         fall into the hands of the Indian braves.
  6.     </p>
  7. </div>

CSS Code

COPY
  1. div.k-intro {
  2. 	max-width: 33em;
  3. 	background: #FFF;
  4. 	color: #303030;
  5. 	line-height: 1.58;
  6. 	padding-left: 1em;
  7. 	margin: 0 0 2em 2em;
  8. 	border-left: 1px solid #C0C0C0;
  9. }
  10. 	div.k-intro p {font-size: 1.2em; text-indent: 0;}
  11. 	div.k-intro p:first-child:first-letter {
  12. 		line-height: 0.5;
  13. 		font-size: 200%;
  14. 		color: #000;
  15. 		background: #FFF;
  16. 	}
  17. 
                                
  18. 	/* Exceptions */
  19. 	div.k-article div.k-intro {max-width: 33em;}
  20. 	ul.k-form-steps + div.k-intro {margin: 2em 0;}
  21. 
                                

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