Buy now
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