[ KAWWA PORTAL ] Components : Illustration

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.

Demo
Snippets

The figure caption goes here

HTML5 Plain Code

COPY

```
<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

COPY

```
.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:

List of Components

: jQuery Interactive Feature
: Tapestry integration
: AngularJS Feature

Navigation

Forms

Tables

Dynamic Table

Blocks

Site Utilities

Editorial

eCommerce