KAWWA Markup Pattern Library


Editorial

Illustration Component Information

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

Add to list

Use this component to present structured illustrations.

Illustrations are presented, by default, center-aligned. You may add the classes "to-right" or "to-left" to modify their placement.

The figure caption goes here

HTML5 Plain Code

COPY
  1. <figure class="k-illustration-block">
  2. 	<img src="./coffee1.jpg" alt="" /> 
  3. 	<figcaption>The figure caption goes here</figcaption>
  4. </figure>
  5. <!-- You may right/left align your blocks adding the "to-left" or "to-right" classes -->

CSS Code

COPY
  1. .k-illustration-block {
  2. 	text-align: center;
  3. 	padding: 2em 0;
  4. 	margin: 0 auto;
  5. }
  6. 	.k-illustration-block.to-right {
  7. 		float: right;
  8. 		width: 30%;
  9. 		padding: 2% 0 8% 8%;
  10. 	}
  11. 	.k-illustration-block.to-left {
  12. 		float: left;
  13. 		width: 30%;
  14. 		padding: 2% 8% 8% 0;
  15. 	}
  16. 
                                
  17. 	.k-illustration-block img {
  18. 		max-width: 100%;
  19. 		border: 4px solid #E8E8E8;
  20. 		box-shadow: 0 0 3px #999;
  21. 	}
  22. 
                                
  23. 	figcaption, .caption {
  24. 		display: block;
  25. 		font: 0.8em open_sansitalic, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  26. 		margin: 5px auto 0;
  27. 	}
  28. 
                                

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