<!-- Avatar Sizes -->
<div class="card">
    <h5 class="card-header">Sizes</h5>
    <div class="card-body">
        <div class="d-flex align-items-center flex-wrap">

            <div class="avatar avatar-xs me-2">
                <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/1.png"
                     alt="Avatar"
                     class="rounded-circle" />
            </div>

            <div class="avatar avatar-sm me-2">
                <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/1.png"
                     alt="Avatar"
                     class="rounded-circle" />
            </div>

            <div class="avatar me-2">
                <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/1.png"
                     alt="Avatar"
                     class="rounded-circle" />
            </div>

            <div class="avatar avatar-md me-2">
                <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/1.png"
                     alt="Avatar"
                     class="rounded-circle" />
            </div>

            <div class="avatar avatar-lg me-2">
                <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/1.png"
                     alt="Avatar"
                     class="rounded-circle" />
            </div>

            <div class="avatar avatar-xl">
                <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/1.png"
                     alt="Avatar"
                     class="rounded-circle" />
            </div>

        </div>
    </div>
</div>
<!-- /Avatar Sizes -->

            

<!-- Avatar Shapes -->
<div class="card h-100">
    <h5 class="card-header">Shapes</h5>
    <div class="card-body">
        <div class="d-flex align-items-center my-4">

            <div class="avatar me-2">
                <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/1.png"
                     alt="Avatar"
                     class="rounded-circle" />
            </div>

            <div class="avatar me-2">
                <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/1.png"
                     alt="Avatar"
                     class="rounded" />
            </div>

            <div class="avatar">
                <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/1.png"
                     alt="Avatar" />
            </div>

        </div>
    </div>
</div>
<!-- /Avatar Shapes -->

            

<!-- Avatar Group Default -->
<div class="col-md-3 col-sm-6">
    <small class="fw-medium">Default</small>
    <div class="d-flex align-items-center avatar-group my-4">

        <div class="avatar">
            <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/5.png"
                 alt="Avatar"
                 class="rounded-circle" />
        </div>

        <div class="avatar">
            <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/12.png"
                 alt="Avatar"
                 class="rounded-circle" />
        </div>

        <div class="avatar">
            <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/6.png"
                 alt="Avatar"
                 class="rounded-circle" />
        </div>

        <div class="avatar">
            <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/10.png"
                 alt="Avatar"
                 class="rounded-circle" />
        </div>

    </div>
</div>
<!-- /Avatar Group Default -->

            

<!-- Avatar Group Pull Up with Tooltip -->
<div class="col-md-3 col-sm-6">
    <small class="fw-medium">Pull Up with Tooltip</small>
    <ul class="list-unstyled m-0 d-flex align-items-center avatar-group my-4">

        <li class="avatar pull-up"
            data-bs-toggle="tooltip"
            data-bs-placement="top"
            title="Vinnie Mostowy">
            <img class="rounded-circle"
                 src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/5.png"
                 alt="Avatar" />
        </li>

        <li class="avatar pull-up"
            data-bs-toggle="tooltip"
            data-bs-placement="top"
            title="Allen Rieske">
            <img class="rounded-circle"
                 src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/12.png"
                 alt="Avatar" />
        </li>

        <li class="avatar pull-up"
            data-bs-toggle="tooltip"
            data-bs-placement="top"
            title="Julee Rossignol">
            <img class="rounded-circle"
                 src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/6.png"
                 alt="Avatar" />
        </li>

        <li class="avatar pull-up"
            data-bs-toggle="tooltip"
            data-bs-placement="top"
            title="Darcey Nooner">
            <img class="rounded-circle"
                 src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/10.png"
                 alt="Avatar" />
        </li>

    </ul>
</div>
<!-- /Avatar Group Pull Up with Tooltip -->

            

<!-- Avatar Group With Count -->
<div class="col-md-3 col-sm-6">
    <small class="fw-medium">Avatar with count</small>
    <div class="d-flex align-items-center avatar-group my-4">

        <div class="avatar">
            <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/5.png"
                 alt="Avatar"
                 class="rounded-circle pull-up" />
        </div>

        <div class="avatar">
            <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/12.png"
                 alt="Avatar"
                 class="rounded-circle pull-up" />
        </div>

        <div class="avatar">
            <img src="~/gtlib/dependencylib/sneatlayout/assets/img/avatars/6.png"
                 alt="Avatar"
                 class="rounded-circle pull-up" />
        </div>

        <div class="avatar">
            <span class="avatar-initial rounded-circle pull-up"
                  data-bs-toggle="tooltip"
                  data-bs-placement="bottom"
                  title="3 more">+3</span>
        </div>

    </div>
</div>
<!-- /Avatar Group With Count -->