Icon Box

Icon container for feature cards, section headers, and badges. Uses primary-soft background and primary color.

Basic Usage

<span class="af-icon-box">
  <i class="bi bi-grid-3x3-gap" aria-hidden="true">
  </i>
</span>

Sizes

af-icon-box - Default (3rem)
af-icon-box af-is-sm - Small (2.5rem)
af-icon-box af-is-lg - Large (4rem)

<span class="af-icon-box af-is-sm">
  S
</span>
<span class="af-icon-box">
  M
</span>
<span class="af-icon-box af-is-lg">
  L
</span>

With Feature Card

<div class="af-card">
  <div class="af-inline af-items-center af-gap-sm">
    <span class="af-icon-box">
      <i class="bi bi-sliders" aria-hidden="true">
      </i>
    </span>
    <h3 class="af-text-h4">
      Active users
    </h3>
  </div>
  <p class="af-text-muted">
    Subtitle or supporting line.
  </p>
</div>