Docs - Icon Boxes

Connect lists-icon-boxes.css to use icon boxes styles.

Icon Boxes appearance could be changed using next modifyers:

• .pi-icon-box-icon-big - big icon in icon box

Icon Boxes icon appearance could be changed using next modifyers:

• .pi-icon-box-icon-base - icon in base theme color
• .pi-icon-box-icon-circle - icon in circle
• .pi-icon-box-icon-square - icon in square

<div class="pi-icon-box">
  <div class="pi-icon-box-icon">
    <i class="icon-cog"></i>
  </div>
  <div class="pi-icon-box-content">
    <h5>Simple icon box</h5>
    <p>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium
    </p>
  </div>
</div>

<div class="pi-icon-box pi-icon-box-icon-big">
  <div class="pi-icon-box-icon">
    <i class="icon-cog"></i>
  </div>
  <div class="pi-icon-box-content">
    <h5>Simple icon box - big</h5>
    <p>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium
    </p>
  </div>
</div>

<div class="pi-icon-box pi-icon-box-icon-big">
  <div class="pi-icon-box-icon pi-icon-box-icon-base">
    <i class="icon-cog"></i>
  </div>
  <div class="pi-icon-box-content">
    <h5>Simple icon box - base theme color</h5>
    <p>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium
    </p>
  </div>
</div>

<div class="pi-icon-box pi-icon-box-icon-big">
  <div class="pi-icon-box-icon pi-icon-box-icon-dark">
    <i class="icon-cog"></i>
  </div>
  <div class="pi-icon-box-content">
    <h5>Simple icon box - dark color</h5>
    <p>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium
    </p>
  </div>
</div>

<div class="pi-icon-box pi-icon-box-icon-big">
  <div class="pi-icon-box-icon pi-icon-box-hover">
    <i class="icon-cog"></i>
  </div>
  <div class="pi-icon-box-content">
    <h5>Simple icon box - dark color</h5>
    <p>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium
    </p>
  </div>
</div>

<div class="pi-icon-box">
  <div class="pi-icon-box-icon pi-icon-box-icon-circle">
    <i class="icon-cog"></i>
  </div>
  <div class="pi-icon-box-content-2">
    <h4>Icon box with icon in circle</h4>
    <p>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium
    </p>
  </div>
</div>

<div class="pi-icon-box">
  <div class="pi-icon-box-icon pi-icon-box-icon-square">
    <i class="icon-cog"></i>
  </div>
  <div class="pi-icon-box-content-2">
    <h4>Icon box with icon in square</h4>
    <p>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium
    </p>
  </div>
</div>

<div class="pi-icon-box pi-icon-box-icon-big">
  <div class="pi-icon-box-icon pi-icon-box-icon-circle">
    <i class="icon-cog"></i>
  </div>
  <div class="pi-icon-box-content-2">
    <h4>Icon box with big icon in circle</h4>
    <p>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium
    </p>
  </div>
</div>

<div class="pi-icon-box pi-icon-box-icon-big">
  <div class="pi-icon-box-icon pi-icon-box-icon-square">
    <i class="icon-cog"></i>
  </div>
  <div class="pi-icon-box-content-2">
    <h4>Icon box with big icon in square</h4>
    <p>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium
    </p>
  </div>
</div>

<div class="pi-icon-box-vertical pi-icon-box-hover pi-text-center">
  <div class="pi-icon-box-icon pi-icon-box-icon-circle">
    <i class="icon-cog"></i>
  </div>
  <div class="pi-icon-box-content">
    <h4>Icon box vertical</h4>
    <p>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium
    </p>
  </div>
</div>

<div class="pi-icon-box-vertical pi-icon-box-vertical-icon-big pi-icon-box-hover pi-text-center">
  <div class="pi-icon-box-icon pi-icon-box-icon-circle">
    <i class="icon-cog"></i>
  </div>
  <div class="pi-icon-box-content">
    <h4>Icon box vertical - big icon</h4>
    <p>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium
    </p>
  </div>
</div>

<div class="pi-icon-box-vertical pi-icon-box-vertical-icon-bigger pi-icon-box-hover pi-text-center">
  <div class="pi-icon-box-icon pi-icon-box-icon-circle">
    <i class="icon-cog"></i>
  </div>
  <div class="pi-icon-box-content">
    <h4>Icon box vertical - the biggest icon</h4>
    <p>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium
    </p>
  </div>
</div>