Icon box

<!-- Vector icon -->
<div class="icon-box">
  <div class="icon-box-icon">
    <i data-feather="truck"></i>
  </div>
  <h3 class="icon-box-title">Free local delivery</h3>
  <p class="icon-box-text">Free delivery for all orders over $100</p>
</div>

<!-- Image -->
<div class="icon-box">
  <div class="icon-box-icon">
    <img src="path-to-image" class="rounded-circle" alt="Image">
  </div>
  <h3 class="icon-box-title">Taylor Jackson</h3>
  <p class="icon-box-text">Co-founder, CEO at Company Ltd.</p>
</div>

// Vector icon
.icon-box
  .icon-box-icon
    i(data-feather="truck")
  h3.icon-box-title Free local delivery
  p.icon-box-text Free delivery for all orders over $100

// Image
.icon-box
  .icon-box-icon
    img(src="path-to-image", alt="Image").rounded-circle
  h3.icon-box-title Taylor Jackson
  p.icon-box-text Co-founder, CEO at Company Ltd.

<!-- Center aligned -->
<div class="icon-box text-center">
  <div class="icon-box-icon">
    <i data-feather="credit-card"></i>
  </div>
  <h3 class="icon-box-title">Secure online payment</h3>
  <p class="icon-box-text">We posess SSL / Secure Certificate</p>
</div>

<!-- Right aligned -->
<div class="icon-box text-right">
  <div class="icon-box-icon">
    <i data-feather="refresh-cw"></i>
  </div>
  <h3 class="icon-box-title">Money back guarantee</h3>
  <p class="icon-box-text">We return money within 30 days</p>
</div>

//  Center aligned
.icon-box.text-center
  .icon-box-icon
    i(data-feather="credit-card")
  h3.icon-box-title Secure online payment
  p.icon-box-text We posess SSL / Secure Certificate

// Right aligned
.icon-box.text-right
  .icon-box-icon
    i(data-feather="refresh-cw")
  h3.icon-box-title Money back guarantee
  p.icon-box-text We return money within 30 days

<!-- Icon on the left -->
<div class="icon-box d-flex align-items-center text-center">
  <div class="icon-box-icon my-4 mr-3">
    <i data-feather="truck"></i>
  </div>
  <div class="icon-box-body">
    <h3 class="icon-box-title">Free local delivery</h3>
    <p class="icon-box-text">Free delivery for all orders over $100</p>
  </div>
</div>

<!-- Icon on the right -->
<div class="icon-box d-flex align-items-center text-right">
  <div class="icon-box-body">
    <h3 class="icon-box-title">Secure online payment</h3>
    <p class="icon-box-text">We posess SSL / Secure Certificate</p>
  </div>
  <div class="icon-box-icon my-4 ml-3">
    <i data-feather="credit-card"></i>
  </div>
</div>

//  Icon on the left
.icon-box.d-flex.align-items-center
  .icon-box-icon.my-4.mr-3
    i(data-feather="truck")
  .icon-box-body
    h3.icon-box-title Free local delivery
    p.icon-box-text Free delivery for all orders over $100

// Icon on the right
.icon-box.d-flex.align-items-center.text-right
  .icon-box-body
    h3.icon-box-title Secure online payment
    p.icon-box-text We posess SSL / Secure Certificate
  .icon-box-icon.my-4.ml-3
    i(data-feather="credit-card")

<!-- Inside card -->
<div class="card">
  <div class="card-body">
    <div class="icon-box text-center">
      <div class="icon-box-icon">
        <i data-feather="upload-cloud"></i>
      </div>
      <h3 class="icon-box-title">Cloud files storage</h3>
      <p class="icon-box-text">Proin nec turpis vel tortor venenatis tempus. Sed mollis vel arcu in tempor. Mauris enim purus, laoreet nec elit non euismod tempur.</p>
      <a href="#" class="btn btn-pill btn-outline-primary btn-sm">Learn more</a>
    </div>
  </div>
</div>

//  Inside card
.card
  .card-body
    .icon-box.text-center
      .icon-box-icon
        i(data-feather="upload-cloud")
      h3.icon-box-title Cloud files storage
      p.icon-box-text.pb-3 Proin nec turpis vel tortor venenatis tempus. Sed mollis vel arcu in tempor. Mauris enim purus, laoreet nec elit non euismod tempur.
      a.btn.btn-pill.btn-outline-primary.btn-sm(href="#") Learn more