Icon box

A simple component to describe the various benefits of a product.

Createx component

Basic example

Icon box image

E-commerce Websites

Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.

<!-- Basic icon box -->
<div class="text-left">
  <img class="mb-4" src="path-to-image" width="48" alt="Icon box image">
  <h3 class="h5 mb-2">E-commerce Websites</h3>
  <p class="mb-0 text-muted">Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.</p>
</div>

Alignment

Icon box image

E-commerce Websites

Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.

Icon box image

Content-rich Websites

Culpa nostrud commodo ea consequat reprehenderit aliquip.

<!-- Center alignment -->
<div class="text-center">
  <img class="mb-4" src="path-to-image" width="48" alt="Icon box image">
  <h3 class="h5 mb-2">E-commerce Websites</h3>
  <p class="mb-0 text-muted">Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.</p>
</div>

<!-- Right alignment -->
<div class="text-right">
  <img class="mb-4" src="path-to-image" width="48" alt="Icon box image">
  <h3 class="h5 mb-2">Content-rich Websites</h3>
  <p class="mb-0 text-muted">Culpa nostrud commodo ea consequat reprehenderit aliquip.</p>
</div>

Light version

Icon box image

E-commerce Websites

Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.

<!-- Basic icon box -->
<div class="text-center">
  <img class="mb-4" src="path-to-image" width="48" alt="Icon box image">
  <h3 class="h5 mb-2 text-white">E-commerce Websites</h3>
  <p class="mb-0 text-white opacity-60">Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.</p>
</div>

Grid: 3 columns (with dividers)

Icon box image

E-commerce Websites

Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.

Icon box image

Content-rich Websites

Culpa nostrud commodo ea consequat reprehenderit aliquip.

Icon box image

B2B /B2C Services

Viverra scelerisque consequat net. Adipisicing esse consequat.

<!-- Icon box grid: 3 columns (with dividers) -->
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <div class="text-center mb-sm-0 mb-grid-gutter">
        <img class="mb-4" src="path-to-image" width="48" alt="Icon box image">
        <h3 class="h5 mb-2">E-commerce Websites</h3>
        <p class="mb-0 text-muted">Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.</p>
      </div>
    </div>
    <span class="divider-vertical d-sm-block d-none"></span>
    <div class="col-sm-4">
      <div class="text-center mb-sm-0 mb-grid-gutter">
        <img class="mb-4" src="path-to-image" width="48" alt="Icon box image">
        <h3 class="h5 mb-2">Content-rich Websites</h3>
        <p class="mb-0 text-muted">Culpa nostrud commodo ea consequat reprehenderit aliquip. </p>
      </div>
    </div>
    <span class="divider-vertical d-sm-block d-none"></span>
    <div class="col-sm-4">
      <div class="text-center">
        <img class="mb-4" src="path-to-image" width="48" alt="Icon box image">
        <h3 class="h5 mb-2">B2B /B2C Services</h3>
        <p class="mb-0 text-muted">Viverra scelerisque consequat net. Adipisicing esse consequat. </p>
      </div>
    </div>
  </div>
</div>

Inside card

Icon box image

E-commerce Websites

Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.

Icon box image

Content-rich Websites

Culpa nostrud commodo ea consequat reprehenderit aliquip.

<!-- Card: border -->
<div class="card card-hover text-center">
  <div class="card-body">
    <img class="mb-4" src="path-to-image" width="48" alt="Icon box image">
    <h3 class="h5 mb-2">E-commerce Websites</h3>
    <p class="mb-0 text-muted">Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.</p>
  </div>
</div>

<!-- Card: box-shadow -->
<div class="card border-0 box-shadow card-hover text-center">
  <div class="card-body">
    <img class="mb-4" src="path-to-image" width="48" alt="Icon box image">
    <h3 class="h5 mb-2">Content-rich Websites</h3>
    <p class="mb-0 text-muted">Culpa nostrud commodo ea consequat reprehenderit aliquip.</p>
  </div>
</div>

Use Case: Statistics

Icon box image

60%

Clients on the recommendation of friends

Icon box image

2400+

Apartments renovated

Icon box image

670

Qualified specialists

<!-- Statistic icon box -->
<div class="text-center">
  <img class="mb-3" src="path-to-image" width="48" alt="Icon box image">
  <h3 class="h5 mb-2 pt-1 text-primary" style="font-size: 2.875rem">60%</h3>
  <p class="mb-0 font-size-sm text-dark">Clients on the recommendation of friends</p>
</div>
Top