<!-- avatar small -->
        <div class="avatar-sm">
          <img src="/images/avatar-img.svg" alt="profile" class="avatar-img-sm" />
        </div>

        <!-- avatar medium -->
        <div class="avatar-md">
          <img src="/images/avatar-img.svg" alt="profile" class="avatar-img-md" />
        </div>

        <!-- avatar large -->
        <div class="avatar-lg">
          <img src="/images/avatar-img.svg" alt="profile" class="avatar-img-lg" />
        </div>

        <!-- avatar X-large -->
        <div class="avatar-x-lg">
          <img src="/images/avatar-img.svg" alt="profile" class="avatar-img-x-lg" />
        </div>