Icon box

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

Finder component

Media type and shape

Rounded font icon media

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

Rounded image media

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

Cicle font icon media

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

Cicle image media

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

<!-- Icon box: Rounded font icon media -->
<div class="icon-box">
  <div class="icon-box-media bg-faded-primary text-primary mb-3">
    <i class="fi-bed"></i>
  </div>
  <h3 class="icon-box-title fs-base">Rounded font icon media</h3>
  <p class="fs-sm">Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.</p>
</div>

<!-- Icon box: Rounded image media -->
<div class="icon-box">
  <div class="icon-box-media mb-3" style="background-image: url(path-to-image);"></div>
  <h3 class="icon-box-title fs-base icon-box-title">Rounded image media</h3>
  <p class="fs-sm">Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.</p>
</div>

<!-- Icon box: Cicle font icon media -->
<div class="icon-box">
  <div class="icon-box-media bg-faded-accent text-accent rounded-circle mb-3">
    <i class="fi-cafe"></i>
  </div>
  <h3 class="icon-box-title fs-base">Cicle font icon media</h3>
  <p class="fs-sm">Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.</p>
</div>

<!-- Icon box: Cicle image media -->
<div class="icon-box">
  <div class="icon-box-media rounded-circle mb-3" style="background-image: url(path-to-image);"></div>
  <h3 class="icon-box-title fs-base icon-box-title">Cicle image media</h3>
  <p class="fs-sm">Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.</p>
</div>
// Icon box: Rounded font icon media
.icon-box
  .icon-box-media.bg-faded-primary.text-primary.mb-3
    i.fi-bed
  h3.icon-box-title.fs-base Rounded font icon media
  p.fs-sm Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.

// Icon box: Rounded image media
.icon-box
  .icon-box-media.mb-3(style="background-image: url(path-to-image);")
  h3.icon-box-title.fs-base.icon-box-title Rounded image media
  p.fs-sm Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.

// Icon box: Cicle font icon media
.icon-box
  .icon-box-media.bg-faded-accent.text-accent.rounded-circle.mb-3
    i.fi-cafe
  h3.icon-box-title.fs-base Cicle font icon media
  p.fs-sm Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.

// Icon box: Cicle image media
.icon-box
  .icon-box-media.rounded-circle.mb-3(style="background-image: url(path-to-image);")
  h3.icon-box-title.fs-base.icon-box-title Cicle image media
  p.fs-sm Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.

Alignment

Center aligned

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

Right aligned

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

<!-- Center aligned -->
<div class="icon-box text-center">
  <div class="icon-box-media bg-faded-primary text-primary mb-3 mx-auto">
    <i class="fi-apartment"></i>
  </div>
  <h3 class="icon-box-title fs-base">Center aligned</h3>
  <p class="fs-sm">Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.</p>
</div>

<!-- Right aligned -->
<div class="icon-box text-end">
  <div class="icon-box-media bg-faded-primary text-primary mb-3 ms-auto">
    <i class="fi-apartment"></i>
  </div>
  <h3 class="icon-box-title fs-base">Right aligned</h3>
  <p class="fs-sm">Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.</p>
</div>
// Center alignment
.icon-box.text-center
  .icon-box-media.bg-faded-primary.text-primary.mb-3.mx-auto
    i.fi-apartment
  h3.icon-box-title.fs-base Center aligned
  p.fs-sm Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.

// Right alignment
.icon-box.text-end
  .icon-box-media.bg-faded-primary.text-primary.mb-3.ms-auto
    i.fi-apartment
  h3.cs-icon-box-title.fs-base Right aligned
  p.fs-sm Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.

Card style

<!-- Icon box inside card with border -->
<a href="#" class="icon-box card card-body card-hover text-center">
  <div class="icon-box-media bg-faded-primary text-primary rounded-circle mb-3 mx-auto">
    <i class="fi-meds"></i>
  </div>
  <h3 class="icon-box-title fs-base mb-0">Border card</h3>
</a>

<!-- Icon box inside card with shadow -->
<a href="#" class="icon-box card card-body border-0 shadow-sm card-hover text-center">
  <div class="icon-box-media bg-faded-primary text-primary rounded-circle mb-3 mx-auto">
    <i class="fi-house-chosen"></i>
  </div>
  <h3 class="icon-box-title fs-base mb-0">Shadow card</h3>
</a>

<!-- Icon box inside card with background -->
<a href="#" class="icon-box card card-body border-0 bg-secondary card-hover text-center">
  <div class="icon-box-media bg-light text-primary rounded-circle mb-3 mx-auto">
    <i class="fi-spa"></i>
  </div>
  <h3 class="icon-box-title fs-base mb-0">Background card</h3>
</a>
// Icon box inside card with border
a(href="#").icon-box.card.card-body.card-hover.text-center
  .icon-box-media.bg-faded-primary.text-primary.rounded-circle.mb-3.mx-auto
    i.fi-meds
  h3.icon-box-title.fs-base.mb-0 Border card

// Icon box inside card with shadow
a(href="#").icon-box.card.card-body.border-0.shadow-sm.card-hover.text-center
  .icon-box-media.bg-faded-primary.text-primary.rounded-circle.mb-3.mx-auto
    i.fi-house-chosen
  h3.icon-box-title.fs-base.mb-0 Shadow card

// Icon box inside card with background
a(href="#").icon-box.card.card-body.border-0.bg-secondary.card-hover.text-center
  .icon-box-media.bg-light.text-primary.rounded-circle.mb-3.mx-auto
    i.fi-spa
  h3.icon-box-title.fs-base.mb-0 Background card

Pill style

<!-- Icon box inside horizontal card with border (Rounded) -->
<a href="#" class="icon-box card flex-row align-items-center card-hover py-2 ps-2 pe-4">
  <div class="icon-box-media bg-faded-primary text-primary me-2">
    <i class="fi-meds"></i>
  </div>
  <h3 class="icon-box-title fs-sm ps-1 mb-0">Border card</h3>
</a>

<!-- Icon box inside horizontal card with shadow (Rounded) -->
<a href="#" class="icon-box card flex-row align-items-center card-hover border-0 shadow-sm py-2 ps-2 pe-4">
  <div class="icon-box-media bg-faded-primary text-primary me-2">
    <i class="fi-house-chosen"></i>
  </div>
  <h3 class="icon-box-title fs-sm ps-1 mb-0">Shadow card</h3>
</a>

<!-- Icon box inside horizontal card with background (Rounded) -->
<a href="#" class="icon-box card flex-row align-items-center card-hover border-0 bg-secondary py-2 ps-2 pe-4" style="max-width: 14rem;">
  <div class="icon-box-media bg-light text-primary me-2">
    <i class="fi-spa"></i>
  </div>
  <h3 class="icon-box-title fs-sm ps-1 mb-0">Background card</h3>
</a>

<!-- Icon box inside horizontal card with border (Pill) -->
<a href="#" class="icon-box card flex-row align-items-center card-hover rounded-pill py-2 ps-2 pe-4">
  <div class="icon-box-media bg-faded-primary text-primary rounded-circle me-2">
    <i class="fi-meds"></i>
  </div>
  <h3 class="icon-box-title fs-sm ps-1 mb-0">Border card</h3>
</a>

<!-- Icon box inside horizontal card with shadow (Pill) -->
<a href="#" class="icon-box card flex-row align-items-center card-hover border-0 shadow-sm rounded-pill py-2 ps-2 pe-4">
  <div class="icon-box-media bg-faded-primary text-primary rounded-circle me-2">
    <i class="fi-house-chosen"></i>
  </div>
  <h3 class="icon-box-title fs-sm ps-1 mb-0">Shadow card</h3>
</a>

<!-- Icon box inside horizontal card with background (Pill) -->
<a href="#" class="icon-box card flex-row align-items-center card-hover border-0 bg-secondary rounded-pill py-2 ps-2 pe-4">
  <div class="icon-box-media bg-light text-primary rounded-circle me-2">
    <i class="fi-spa"></i>
  </div>
  <h3 class="icon-box-title fs-sm ps-1 mb-0">Background card</h3>
</a>
// Icon box inside horizontal card with border (Rounded)
a(href="#").icon-box.card.flex-row.align-items-center.card-hover.py-2.ps-2.pe-4
  .icon-box-media.bg-faded-primary.text-primary.me-2
    i.fi-meds
  h3.icon-box-title.fs-sm.ps-1.mb-0 Border card

// Icon box inside horizontal card with shadow (Rounded)
a(href="#").icon-box.card.flex-row.align-items-center.card-hover.border-0.shadow-sm.py-2.ps-2.pe-4
  .icon-box-media.bg-faded-primary.text-primary.me-2
    i.fi-house-chosen
  h3.icon-box-title.fs-sm.ps-1.mb-0 Shadow card

// Icon box inside horizontal card with background (Rounded)
a(href="#").icon-box.card.flex-row.align-items-center.card-hover.border-0.bg-secondary.py-2.ps-2.pe-4
  .icon-box-media.bg-light.text-primary.me-2
    i.fi-spa
  h3.icon-box-title.fs-sm.ps-1.mb-0 Background card

// Icon box inside horizontal card with border (Pill)
a(href="#").icon-box.card.flex-row.align-items-center.card-hover.rounded-pill.py-2.ps-2.pe-4
  .icon-box-media.bg-faded-primary.text-primary.rounded-circle.me-2
    i.fi-meds
  h3.icon-box-title.fs-sm.ps-1.mb-0 Border card

// Icon box inside horizontal card with shadow (Pill)
a(href="#").icon-box.card.flex-row.align-items-center.card-hover.border-0.shadow-sm.rounded-pill.py-2.ps-2.pe-4
  .icon-box-media.bg-faded-primary.text-primary.rounded-circle.me-2
    i.fi-house-chosen
  h3.icon-box-title.fs-sm.ps-1.mb-0 Shadow card

// Icon box inside horizontal card with background (Pill)
a(href="#").icon-box.card.flex-row.align-items-center.card-hover.border-0.bg-secondary.rounded-pill.py-2.ps-2.pe-4
  .icon-box-media.bg-light.text-primary.rounded-circle.me-2
    i.fi-spa
  h3.icon-box-title.fs-sm.ps-1.mb-0 Background card

Color variants

Primary icon box

Accent icon box

Success icon box

Info icon box

Warning icon box

Danger icon box

<!-- Primary icon box -->
<div class="icon-box text-center">
  <div class="icon-box-media bg-faded-primary text-primary rounded-circle mx-auto mb-3">
    <i class="fi-apartment"></i>
  </div>
  <h3 class="icon-box-title fs-sm">Primary icon box</h3>
</div>

<!-- Accent icon box -->
<div class="icon-box text-center">
  <div class="icon-box-media bg-faded-accent text-accent rounded-circle mx-auto mb-3">
    <i class="fi-bath"></i>
  </div>
  <h3 class="icon-box-title fs-sm">Accent icon box</h3>
</div>

<!-- Success icon box -->
<div class="icon-box text-center">
  <div class="icon-box-media bg-faded-success text-success rounded-circle mx-auto mb-3">
    <i class="fi-bed"></i>
  </div>
  <h3 class="icon-box-title fs-sm">Success icon box</h3>
</div>

<!-- Info icon box -->
<div class="icon-box text-center">
  <div class="icon-box-media bg-faded-info text-info rounded-circle mx-auto mb-3">
    <i class="fi-billboard-house"></i>
  </div>
  <h3 class="icon-box-title fs-sm">Info icon box</h3>
</div>

<!-- Warning icon box -->
<div class="icon-box text-center">
  <div class="icon-box-media bg-faded-warning text-warning rounded-circle mx-auto mb-3">
    <i class="fi-cafe"></i>
  </div>
  <h3 class="icon-box-title fs-sm">Warning icon box</h3>
</div>

<!-- Danger icon box -->
<div class="icon-box text-center">
  <div class="icon-box-media bg-faded-danger text-danger rounded-circle mx-auto mb-3">
    <i class="fi-cctv"></i>
  </div>
  <h3 class="icon-box-title fs-sm">Danger icon box</h3>
</div>
// Primary icon box
.icon-box.text-center
  .icon-box-media.bg-faded-primary.text-primary.rounded-circle.mx-auto.mb-3
    i.fi-apartment
  h3.icon-box-title.fs-sm Primary icon box

// Accent icon box
.icon-box.text-center
  .icon-box-media.bg-faded-accent.text-accent.rounded-circle.mx-auto.mb-3
    i.fi-bath
  h3.icon-box-title.fs-sm Accent icon box

// Success icon box
.icon-box.text-center
  .icon-box-media.bg-faded-success.text-success.rounded-circle.mx-auto.mb-3
    i.fi-bed
  h3.icon-box-title.fs-sm Success icon box

// Info icon box
.icon-box.text-center
  .icon-box-media.bg-faded-info.text-info.rounded-circle.mx-auto.mb-3
    i.fi-billboard-house
  h3.icon-box-title.fs-sm Info icon box

// Warning icon box
.icon-box.text-center
  .icon-box-media.bg-faded-warning.text-warning.rounded-circle.mx-auto.mb-3
    i.fi-cafe
  h3.icon-box-title.fs-sm Warning icon box

// Danger icon box
.icon-box.text-center
  .icon-box-media.bg-faded-danger.text-danger.rounded-circle.mx-auto.mb-3
    i.fi-cctv
  h3.icon-box-title.fs-sm Danger icon box

Light version

Basic icon box

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

Card icon box

Pill icon box

<!-- Light basic icon box -->
<div class="icon-box text-center">
  <div class="icon-box-media bg-faded-light text-light mx-auto mb-3">
    <i class="fi-bed"></i>
  </div>
  <h3 class="icon-box-title fs-base text-light">Basic icon box</h3>
  <p class="fs-sm text-light opacity-60">Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.</p>
</div>

<!-- Light card icon box -->
<a href="#" class="icon-box card card-body card-light card-hover text-center">
  <div class="icon-box-media bg-faded-light text-light rounded-circle mb-3 mx-auto">
    <i class="fi-spa"></i>
  </div>
  <h3 class="icon-box-title fs-base text-light mb-0">Card icon box</h3>
</a>

<!-- Light pill icon box -->
<a href="#" class="icon-box card card-light flex-row align-items-center card-hover rounded-pill py-2 ps-2 pe-4">
  <div class="icon-box-media bg-faded-light text-light rounded-circle me-2">
    <i class="fi-meds"></i>
  </div>
  <h3 class="icon-box-title fs-sm text-light ps-1 mb-0">Pill icon box</h3>
</a>
// Light basic icon box
.icon-box.text-center
  .icon-box-media.bg-faded-light.text-light.mx-auto.mb-3
    i.fi-bed
  h3.icon-box-title.fs-base.text-light Basic icon box
  p.fs-sm.text-light.opacity-60 Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.

// Light card icon box
a(href="#").icon-box.card.card-body.card-light.card-hover.text-center
  .icon-box-media.bg-faded-light.text-light.rounded-circle.mb-3.mx-auto
    i.fi-spa
  h3.icon-box-title.fs-base.text-light.mb-0 Card icon box

// Light pill icon box
a(href="#").icon-box.card.card-light.flex-row.align-items-center.card-hover.rounded-pill.py-2.ps-2.pe-4
  .icon-box-media.bg-faded-light.text-light.rounded-circle.me-2
    i.fi-meds
  h3.icon-box-title.fs-sm.text-light.ps-1.mb-0 Pill icon box
Top