[ KAWWA PORTAL ] Components : Info Block

Blocks

Info Block

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

"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.

Demo
Snippets

Block title

Here goes the content of your block.

HTML5 Plain Code

COPY

```
<div class="k-info-block">
```
```
    <div class="hgroup">
```
```
        <h3>Block title</h3>
```
```
    </div>
```
```
    <div class="content">
```

    	<p>Here goes the content of your block.</p>

```
    </div>
```
```
</div>
```

CSS Code

COPY

```
.k-info-block {
```
```
	clear: both;
```
```
	word-wrap: break-word;
```
```
	margin-bottom: 1em;
```
```
	border-bottom: 2px solid #808080;
```
```
}
```
```
	.k-info-block h2, .k-info-block h3 {
```
```
		font-size: 1em;
```
```
		line-height: 1;
```
```
		text-transform: none;
```
```
		color: #FFF;
```
```
		background: #000;
```
```
		padding: 5px 10px;
```
```
		margin: 0;
```
```
		border: none;
```
```
	}
```

	.k-info-block .content {background: #FFF; padding: 5%;}

	.k-info-block p {line-height: 1.38; margin: 0 0 8px;}

	.k-info-block p:last-child {padding-bottom: 10px;}

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