# Icon Box

## Version 1

It is represented by `.ib-v1` class. ![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0AzmiY4zExWUl17L%2Fib-v1-1.png?generation=1535987994389693\&alt=media)

```
<div class="icon-box ib-v1">
  <i class="oli oli-beaker"></i>
  <h3 class="title">Research Driven</h3>
  <p>Suitable for large list of people<br> in case you just want to list.</p>
</div>
```

## Version 2

It is represented by `.ib-v2` class and the result would be:

![Version 2](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0AzqvO2OJFNmFKNQ%2Fib-v2.png?generation=1535987994385474\&alt=media)

```
<div class="icon-box ib-v2">
  <a href="#">
    <i class="oli oli-beaker"></i>
    <h3 class="title">publications</h3>
  </a>
  <p>Phasellus lectus sem...</p>
</div>
```

## Version 3

It is represented by `.ib-v3` class. The markup is as below:

```
<div class="icon-box ib-v3">
  <i class="oli oli-strategy"></i>
  <h3 class="title"><span>loaded with love</span></h3>
  <p>Phasellus lectus sem, ...</p>
  <a href="#" class="btn btn-extra-small btn-circle btn-skin-dark">read more</a>
</div>
```

The result would be:

![Version 3](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0AztHSDChTlR6z6B%2Fib-v3.png?generation=1535988001545077\&alt=media)

Adding `.ib-boxed` class to this item would lead to:

![Version 3 boxed](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0AzvqvHxe-3NYyZV%2Fib-v3%20boxed.png?generation=1535988001593216\&alt=media)

**skins**

* Grey skin: default
* Blue skin: "ib-blue" class
* Dark skin: "ib-dark" class
* Red skin: "ib-red" class
* Greeb skin: "ib-green" class

Note You can also use "set-bg" class and add a background image as well:

```
<div class="icon-box ib-v3 ib-boxed set-bg">
    <img src="../../assets/img/page-title-bg-light-1.jpg" alt="test" class="set-me">
    <i class="icon oi-scatter-plot"></i>
    <h3>Awesome title</h3>
    <p>Phasellus lectus sem, egestas eget sollicitudin ut, lobortis...</p>
</div>
```

## version 4

It is represented by `.ib-v4` class. The markup is just like version 3 (as you noticed using button is optional) & the result would be:

![Version 4](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0Azx_jQStHj8rqQ2%2Fib-v4.png?generation=1535987994397578\&alt=media)

By adding `.icon-theme` class to `.ib-v4` the icon would be colored as theme color.

## Version 5

It is represented by `.ib-v5` class.

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0AzzwXqpM_nhj6E1%2Fib-v5-1.png?generation=1535987993584694\&alt=media)

```
<div class="icon-box ib-v5">
  <i class="oli oli-telescope2"></i>
  <h3 class="title">In-Depth Video Tutorials</h3>
  <p>Phasellus lectus sem...</p>
  <a href="#" class="btn btn-small btn-circle btn-skin-red btn-trans">read more</a>
</div>
```

By adding `.no-anim` class there would be no animation effect on mouse hover.

## Version 6

It is represented by "ib-v6" class. The markup is shown below:

```
<div class="icon-box ib-v6">
    <i class="icon oi-fiber"></i>
    <div class="ib-wrap">
        <h3>In-Depth Video Tutorials</h3>
        <p>Phasellus lectus sem, egestas eget sollicitudin ut, lobortis...</p>
    </div>
</div>
```

The result would be:

![Version 6](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0B-0KxAZ-QSjM_Cv%2Fib-v6.png?generation=1535988001533453\&alt=media)

By adding `.no-anim` class there would be no animation effect on mouse hover.

## Version 7

It is represented by `.ib-v7` class.

```
<div class="icon-box ib-v7">
  <i class="oli oli-motorcycle"></i>
  <div class="ib-wrap">
    <h3 class="title">In-Depth Video Tutorials</h3>
    <p>Phasellus lectus sem.....</p>
    <a href="#" class="ib-btn">read more</a>
  </div>
</div>
```

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0B-2d9jN1XcRVmci%2Fib-v7-1.png?generation=1535987992160287\&alt=media)

**skins**

* Theme color skin : default
* Dark skin : "ib-dark" class
* Blue skin : "ib-blue" class
* Green skin : "ib-green" class
* Red skin : "ib-red" class

## version 8

It is represented by `.ib-v8` class.

```
<div class="icon-box ib-v8 dark-overlay">
  <i class="oli oli-ok"></i>
  <h3 class="title">BEFORE SEP 14th</h3>
  <p>100 USD</p>
  <a href="#" class="ib-btn">CLOSED!</a>
</div>
```

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0B-47ImOQwPik-As%2Fib-v8-1.png?generation=1535987993609955\&alt=media)

**skins**

* Theme color skin : default
* Dark skin : `.ib-dark` class
* Blue skin : `.ib-blue` class
* Green skin : `.ib-green` class
* Red skin : `.ib-red` class

By adding `.dark-overlay` class the item would be inactive and not clickable.

## Grad-box

Grad boxes are designed to be use in full-width no-gap between grids but they can be used separately as well. Markup is like:

```
<section class="section full-width p-top-0 p-bottom-0">
  <div class="container">
    <div class="row gradient-cols-wrapper sync-cols-height light-grad">

      <div class="col-md-4">
        <div class="inner-wrapper">
          // place for your iconbox
        </div>
      </div>

      <div class="col-md-4">
        <div class="inner-wrapper">
          // place for your iconbox
        </div>
      </div>

      <div class="col-md-4">
        <div class="inner-wrapper">
          // place for your iconbox
        </div>
      </div>

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

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0B-6Of_5FEJy6qld%2Fib-gradient.png?generation=1535987992202055\&alt=media)

To make it dark switch `.light-grad` with `.dark-wrapper` class
