Info Areas

The information areas are a simple way to organise large amounts of information into chunks. You can also add icons, simple or coloured. For an horizontal alignment use the custom class ..info-horizontal. For the title, please use the class .info-title. You can see more illustrative examples below:

Social Conversations

We get insulted by others, lose trust for those others. We get back stabbed by friends. It becomes harder for us to give others a hand.

More about us 
  <div class="info">
    <div class="icon icon-lg icon-shape icon-shape-primary shadow rounded-circle">
      <i class="ni ni-settings-gear-65"></i>
    </div>
    <h6 class="info-title text-uppercase text-primary">Social Conversations</h6>
    <p class="description opacity-8">We get insulted by others, lose trust for those others. We get back stabbed by friends. It becomes harder for us to give others a hand.</p>
    <a href="javascript:;" class="text-primary">More about us
      <i class="ni ni-bold-right text-primary"></i>
    </a>
  </div>

Info Horizontal

Modular Components

The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue whatever.

Learn more 
  <div class="info info-horizontal bg-white">
    <div class="icon icon-shape icon-shape-info rounded-circle text-white">
      <i class="ni ni-hat-3 text-info"></i>
    </div>
    <div class="description pl-4">
      <h5 class="title text-info">Modular Components</h5>
      <p>The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue whatever.</p>
      <a href="#" class="text-info">Learn more</a>
    </div>
  </div>