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