Editorial
Illustration 
- Class name: (k-illustration-block)
- Version: 1.0
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.
HTML5 Plain Code
-
<figure class="k-illustration-block">
-
<img src="./coffee1.jpg" alt="" />
-
<figcaption>The figure caption goes here</figcaption>
-
</figure>
-
<!-- You may right/left align your blocks adding the "to-left" or "to-right" classes -->
CSS Code
-
.k-illustration-block {
-
text-align: center;
-
padding: 2em 0;
-
margin: 0 auto;
-
}
-
.k-illustration-block.to-right {
-
float: right;
-
width: 30%;
-
padding: 2% 0 8% 8%;
-
}
-
.k-illustration-block.to-left {
-
float: left;
-
width: 30%;
-
padding: 2% 8% 8% 0;
-
}
-
.k-illustration-block img {
-
max-width: 100%;
-
border: 4px solid #E8E8E8;
-
box-shadow: 0 0 3px #999;
-
}
-
figcaption, .caption {
-
display: block;
-
font: 0.8em open_sansitalic, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-
margin: 5px auto 0;
-
}
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: