Icon Box

HTML
Pug

<!-- Font Icon Left Aligned (Deault) -->
<div class="icon-box">
  <div class="icon-box-icon">
    <i class="fe-icon-feather"></i>
  </div>
  <h3 class="icon-box-title">Icon box title</h3>
  <p class="icon-box-text">Lorem ipsum dolor sit amet...</p>
  <a class="icon-box-link" href="#">
    Learn more
    <i class="fe-icon-arrow-right"></i>
  </a>
</div>

<!-- Font Icon Center Aligned -->
<div class="icon-box text-center">
  <div class="icon-box-icon">
    <i class="fe-icon-bell"></i>
  </div>
  <h3 class="icon-box-title">Icon box title</h3>
  <p class="icon-box-text">Lorem ipsum dolor sit amet...</p>
  <a class="icon-box-link" href="#">
    Learn more
    <i class="fe-icon-arrow-right"></i>
  </a>
</div>

<!-- Font Icon Right Aligned -->
<div class="icon-box text-right">
  <div class="icon-box-icon">
    <i class="fe-icon-camera"></i>
  </div>
  <h3 class="icon-box-title">Icon box title</h3>
  <p class="icon-box-text">Lorem ipsum dolor sit amet...</p>
  <a class="icon-box-link" href="#">
    Learn more
    <i class="fe-icon-arrow-right"></i>
  </a>
</div>

//- Font Icon Left Aligned (Deault)
.icon-box
  .icon-box-icon: i.fe-icon-feather
  h3.icon-box-title Icon box title
  p.icon-box-text Lorem ipsum dolor sit amet...
  a(href="#").icon-box-link
    | Learn more
    i.fe-icon-arrow-right

//- Font Icon Center Aligned
.icon-box.text-center
  .icon-box-icon: i.fe-icon-bell
  h3.icon-box-title Icon box title
  p.icon-box-text Lorem ipsum dolor sit amet...
  a(href="#").icon-box-link
    | Learn more
    i.fe-icon-arrow-right

//- Font Icon Right Aligned
.icon-box.text-right
  .icon-box-icon: i.fe-icon-camera
  h3.icon-box-title Icon box title
  p.icon-box-text Lorem ipsum dolor sit amet...
  a(href="#").icon-box-link
    | Learn more
    i.fe-icon-arrow-right

HTML
Pug

<!-- Image Icon Left Aligned (Deault) -->
<div class="icon-box">
  <div class="icon-box-image">
    <img src="path-to-image" alt="Image icon">
  </div>
  <h3 class="icon-box-title">Icon box title</h3>
  <p class="icon-box-text">Lorem ipsum dolor sit amet...</p>
  <a class="icon-box-link" href="#">
    Learn more
    <i class="fe-icon-arrow-right"></i>
  </a>
</div>

<!-- Image Icon Center Aligned -->
<div class="icon-box text-center">
  <div class="icon-box-image">
    <img src="path-to-image" alt="Image icon">
  </div>
  <h3 class="icon-box-title">Icon box title</h3>
  <p class="icon-box-text">Lorem ipsum dolor sit amet...</p>
  <a class="icon-box-link" href="#">
    Learn more
    <i class="fe-icon-arrow-right"></i>
  </a>
</div>

<!-- Image Icon Right Aligned -->
<div class="icon-box text-right">
  <div class="icon-box-image">
    <img src="path-to-image" alt="Image icon">
  </div>
  <h3 class="icon-box-title">Icon box title</h3>
  <p class="icon-box-text">Lorem ipsum dolor sit amet...</p>
  <a class="icon-box-link" href="#">
    Learn more
    <i class="fe-icon-arrow-right"></i>
  </a>
</div>

//- Image Icon Left Aligned (Deault)
.icon-box
  .icon-box-image: img(src="path-to-image" alt="Image icon")
  h3.icon-box-title Icon box title
  p.icon-box-text Lorem ipsum dolor sit amet...
  a(href="#").icon-box-link
    | Learn more
    i.fe-icon-arrow-right

//- Image Icon Center Aligned
.icon-box.text-center
  .icon-box-image: img(src="path-to-image" alt="Image icon")
  h3.icon-box-title Icon box title
  p.icon-box-text Lorem ipsum dolor sit amet...
  a(href="#").icon-box-link
    | Learn more
    i.fe-icon-arrow-right

//- Image Icon Right Aligned
.icon-box.text-right
  .icon-box-image: img(src="path-to-image" alt="Image icon")
  h3.icon-box-title Icon box title
  p.icon-box-text Lorem ipsum dolor sit amet...
  a(href="#").icon-box-link
    | Learn more
    i.fe-icon-arrow-right

HTML
Pug

<!-- Horizontal Layout Icon on the Left -->
<div class="icon-box icon-box-horizontal d-sm-table text-center text-sm-left">
  <div class="d-sm-table-cell align-top">
    <div class="icon-box-icon">
      <i class="fe-icon-feather"></i>
    </div>
  </div>
  <div class="d-sm-table-cell align-top pl-sm-4">
    <h3 class="icon-box-title">Icon box title</h3>
    <p class="icon-box-text">Lorem ipsum dolor sit amet...</p>
    <a class="icon-box-link" href="#">
      Learn more
      <i class="fe-icon-arrow-right"></i>
    </a>
  </div>
</div>

<!-- Horizontal Layout Image on the Right -->
<div class="icon-box icon-box-horizontal d-sm-table text-center text-sm-right">
  <div class="d-sm-table-cell align-top pr-sm-4">
    <h3 class="icon-box-title">Icon box title</h3>
    <p class="icon-box-text">Lorem ipsum dolor sit amet...</p>
    <a class="icon-box-link" href="#">
      Learn more
      <i class="fe-icon-arrow-right"></i>
    </a>
  </div>
  <div class="d-sm-table-cell align-top">
    <div class="icon-box-image">
      <img src="path-to-image" alt="Image icon">
    </div>
  </div>
</div>

//- Horizontal Layout Icon on the Left
.icon-box.icon-box-horizontal.d-sm-table.text-center.text-sm-left
  .d-sm-table-cell.align-top
    .icon-box-icon: i.fe-icon-feather
  .d-sm-table-cell.align-top.pl-sm-4
    h3.icon-box-title Icon box title
    p.icon-box-text Lorem ipsum dolor sit amet...
    a(href="#").icon-box-link
      | Learn more
      i.fe-icon-arrow-right

//- Horizontal Layout Image on the Right
.icon-box.icon-box-horizontal.d-sm-table.text-center.text-sm-right
  .d-sm-table-cell.align-top.pr-sm-4
    h3.icon-box-title Icon box title
    p.icon-box-text Lorem ipsum dolor sit amet...
    a(href="#").icon-box-link
      | Learn more
      i.fe-icon-arrow-right
  .d-sm-table-cell.align-top
    .icon-box-image: img(src="path-to-image" alt="Image icon")

HTML
Pug

<!-- Light Skin with Font Icon -->
<div class="icon-box icon-box-light-skin">
  <div class="icon-box-icon">
    <i class="fe-icon-feather"></i>
  </div>
  <h3 class="icon-box-title">Icon box title</h3>
  <p class="icon-box-text">Lorem ipsum dolor sit amet...</p>
  <a class="icon-box-link" href="#">
    Learn more
    <i class="fe-icon-arrow-right"></i>
  </a>
</div>

<!-- Light Skin with Image Icon -->
<div class="icon-box icon-box-light-skin">
  <div class="icon-box-image">
    <img src="path-to-image" alt="Image icon">
  </div>
  <h3 class="icon-box-title">Icon box title</h3>
  <p class="icon-box-text">Lorem ipsum dolor sit amet...</p>
  <a class="icon-box-link" href="#">
    Learn more
    <i class="fe-icon-arrow-right"></i>
  </a>
</div>

//- Light Skin with Font Icon
.icon-box.icon-box-light-skin
  .icon-box-icon: i.fe-icon-feather
  h3.icon-box-title Icon box title
  p.icon-box-text Lorem ipsum dolor sit amet...
  a(href="#").icon-box-link
    | Learn more
    i.fe-icon-arrow-right

//- Light Skin with Image Icon
.icon-box.icon-box-light-skin
  .icon-box-image: img(src="path-to-image" alt="Image icon")
  h3.icon-box-title Icon box title
  p.icon-box-text Lorem ipsum dolor sit amet...
  a(href="#").icon-box-link
    | Learn more
    i.fe-icon-arrow-right

UI Kit

ALL

A-B

C-F

G-L

M-P

R-S

T-W

Font icon variant

Show code

Icon box title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Learn more

Icon box title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Learn more

Icon box title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Learn more

Image variant

Show code

Icon box title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Learn more

Icon box title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Learn more

Icon box title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Learn more

Horizontal layout

Show code

Icon box title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Learn more

Icon box title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Learn more

Icon box title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Learn more

Icon box title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Learn more

Light skin

Show code

Icon box title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Learn more

Icon box title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Learn more

Icon box title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Learn more

Icon box title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Learn more

Icon box title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Learn more

Icon box title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Learn more

Icon Box

Code

Code

Code

Code

Font icon variant

Icon box title

Icon box title

Icon box title

Image variant

Icon box title

Icon box title

Icon box title

Horizontal layout

Icon box title

Icon box title

Icon box title

Icon box title

Light skin

Icon box title

Icon box title

Icon box title

Icon box title

Icon box title

Icon box title