Simple Feature box

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.


<div class="sf-box sf-box-xl">
  <div class="sf-box-icon">
    <i class="ti-heart"></i>
  </div>
  <h5 class="fw-medium">Feature title</h5>
  <p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="sf-box sf-box-lg">
  <div class="sf-box-icon">
    <i class="ti-heart"></i>
  </div>
  <h5 class="fw-medium">Feature title</h5>
  <p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="sf-box">
  <div class="sf-box-icon">
    <i class="ti-heart"></i>
  </div>
  <h5 class="fw-medium">Feature title</h5>
  <p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="sf-box sf-box-sm">
  <div class="sf-box-icon">
    <i class="ti-heart"></i>
  </div>
  <h5 class="fw-medium">Feature title</h5>
  <p>Lorem ipsum dolor sit amet...</p>
</div>

Colors

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="sf-box">
  <div class="sf-box-icon">
    <i class="ti-heart"></i>
  </div>
  <h5 class="fw-medium">Feature title</h5>
  <p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="sf-box dark">
  <div class="sf-box-icon">
    <i class="ti-heart"></i>
  </div>
  <h5 class="fw-medium">Feature title</h5>
  <p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="sf-box outline-gray">
  <div class="sf-box-icon">
    <i class="ti-heart"></i>
  </div>
  <h5 class="fw-medium">Feature title</h5>
  <p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="sf-box outline-dark">
  <div class="sf-box-icon">
    <i class="ti-heart"></i>
  </div>
  <h5 class="fw-medium">Feature title</h5>
  <p>Lorem ipsum dolor sit amet...</p>
</div>

Position Middle

Feature title

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

Feature title

<div class="sf-box">
  <div class="sf-box-icon middle">
    <i class="ti-heart"></i>
  </div>
  <h5 class="fw-medium">Feature title</h5>
  <p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="sf-box">
  <div class="sf-box-icon middle">
    <i class="ti-heart"></i>
  </div>
  <h5 class="fw-normal m-0">Feature title</h5>
</div>

© 2024 FlaTheme, All Rights Reserved.