آیکن باکس (Icon box)

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

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

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

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

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