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">
  <i class="bi bi-star" aria-hidden="true"></i>
</span>
<span class="af-icon-box">
  <i class="bi bi-star" aria-hidden="true"></i>
</span>
<span class="af-icon-box af-is-lg">
  <i class="bi bi-star" aria-hidden="true"></i>
</span>

With Feature Card

Active users

Subtitle or supporting line.

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