Skip to main content

Feature box

Styles

Feature title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Feature title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Feature title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Feature title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.


<div class="row">

  <div class="col-12 col-lg-6">
    <div class="feature-box">
      <div class="feature-box-icon">
        <i class="fas fa-star"></i>
      </div>
      <h5 class="font-weight-medium">Feature title</h5>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div>
  </div>

  <div class="col-12 col-lg-6">
    <div class="feature-box dark">
      <div class="feature-box-icon">
        <i class="fas fa-star"></i>
      </div>
      <h5 class="font-weight-medium">Feature title</h5>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div>
  </div>

  <div class="col-12 col-lg-6">
    <div class="feature-box outline-gray">
      <div class="feature-box-icon">
        <i class="fas fa-star"></i>
      </div>
      <h5 class="font-weight-medium">Feature title</h5>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div>
  </div>

  <div class="col-12 col-lg-6">
    <div class="feature-box outline-dark">
      <div class="feature-box-icon">
        <i class="fas fa-star"></i>
      </div>
      <h5 class="font-weight-medium">Feature title</h5>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div>
  </div>

</div>

Sizes

Feature title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Feature title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Feature title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Feature title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Feature title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.


<div class="row">

  <!-- Extra Large -->
  <div class="col-12">
    <div class="feature-box feature-box-xl">
      <div class="feature-box-icon">
        <i class="fas fa-star"></i>
      </div>
      <h5 class="font-weight-medium">Feature title</h5>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div>
  </div>

  <!-- Large -->
  <div class="col-12">
    <div class="feature-box feature-box-lg">
      <div class="feature-box-icon">
        <i class="fas fa-star"></i>
      </div>
      <h5 class="font-weight-medium">Feature title</h5>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div>
  </div>

  <!-- Regular(default) -->
  <div class="col-12">
    <div class="feature-box">
      <div class="feature-box-icon">
        <i class="fas fa-star"></i>
      </div>
      <h5 class="font-weight-medium">Feature title</h5>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div>
  </div>

  <!-- Small -->
  <div class="col-12">
    <div class="feature-box feature-box-sm">
      <div class="feature-box-icon">
        <i class="fas fa-star"></i>
      </div>
      <h5 class="font-weight-medium">Feature title</h5>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div>
  </div>

  <!-- Extra Small -->
  <div class="col-12">
    <div class="feature-box feature-box-xs">
      <div class="feature-box-icon">
        <i class="fas fa-star"></i>
      </div>
      <h5 class="font-weight-medium">Feature title</h5>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div>
  </div>

</div>