KAWWA Markup Pattern Library


Blocks

Info Block Component Information

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

Add to list

"Info blocks" may be used to group information of the same nature, separating them - at the same time - from the general content of the page.

Block title

Here goes the content of your block.

HTML5 Plain Code

COPY
  1. <div class="k-info-block">
  2.     <div class="hgroup">
  3.         <h3>Block title</h3>
  4.     </div>
  5.     <div class="content">
  6.     	<p>Here goes the content of your block.</p>
  7.     </div>
  8. </div>

CSS Code

COPY
  1. .k-info-block {
  2. 	clear: both;
  3. 	word-wrap: break-word;
  4. 	margin-bottom: 1em;
  5. 	border-bottom: 2px solid #808080;
  6. }
  7. 	.k-info-block h2, .k-info-block h3 {
  8. 		font-size: 1em;
  9. 		line-height: 1;
  10. 		text-transform: none;
  11. 		color: #FFF;
  12. 		background: #000;
  13. 		padding: 5px 10px;
  14. 		margin: 0;
  15. 		border: none;
  16. 	}
  17. 
                                
  18. 	.k-info-block .content {background: #FFF; padding: 5%;}
  19. 
                                
  20. 	.k-info-block p {line-height: 1.38; margin: 0 0 8px;}
  21. 	.k-info-block p:last-child {padding-bottom: 10px;}
  22. 
                                
  23. 
                                

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