# Avatars

Examples for opting different size of image classes.

## Example

Avatar classes are applied to the image so that it scales with the parent element. Use `.avatar-xs`, `.avatar-sm`, `.avatar`, `.avatar-lg`, `.avatar-xl` or `.avatar-xxl` classes to change size.

                          <span class="avatar avatar-xxl avatar-circle avatar-border-xxl mb-2">
                            <img class="avatar-img" src="assets/img/svg/avatar1.svg" alt="Avatars">
                            <span class="avatar-status avatar-xxl-status avatar-success"> </span>
                          </span>
                          <span class="avatar avatar-xl avatar-circle avatar-border-xl mb-2 ms-2">
                            <img class="avatar-img" src="assets/img/svg/avatar1.svg" alt="Avatars">
                            <span class="avatar-status avatar-xl-status avatar-danger"> </span>
                          </span>
                          <span class="avatar avatar-lg avatar-circle avatar-border-lg ms-2 mb-2">
                            <img class="avatar-img" src="assets/img/svg/avatar1.svg" alt="Avatars">
                            <span class="avatar-status avatar-lg-status avatar-warning"> </span>
                          </span>
                          <span class="avatar avatar-circle avatar-border mb-2 ms-2">
                            <img class="avatar-img" src="assets/img/svg/avatar1.svg" alt="Avatars">
                            <span class="avatar-status avatar-offline"> </span>
                          </span>
                          <span class="avatar avatar-sm avatar-circle avatar-border-sm ms-2 mb-2">
                            <img class="avatar-img" src="assets/img/svg/avatar1.svg" alt="Avatars">
                            <span class="avatar-status avatar-sm-status avatar-offline"> </span>
                          </span>
                          <span class="avatar avatar-xs avatar-circle avatar-border-xs ms-2 mb-2">
                            <img class="avatar-img" src="assets/img/svg/avatar1.svg" alt="Avatars">
                            <span class="avatar-status avatar-xs-status avatar-offline"> </span>
                          </span>

## Group

Group your avatars with the help of a `.avatar-group` class.

+6
+6
+6
+6
+6
+6

                          <div class="row align-items-center">
                            <div class="col-auto"<
                              <div class="avatar-group mb-3"<
                                <span class="avatar avatar-xxl avatar-circle"<
                                  <img class="avatar-img" src="assets/img/avatar2.png" alt="Avatar"<
                                </span<
                                <span class="avatar avatar-xxl avatar-circle"<
                                  <img class="avatar-img" src="assets/img/avatar3.png" alt="Avatar"<
                                </span<
                                <span class="avatar avatar-xxl avatar-circle"<
                                  <img class="avatar-img" src="assets/img/avatar4.png" alt="Avatar"<
                                </span<
                                <span class="avatar avatar-xxl avatar-circle"<
                                  <span class="avatar-initials avatar-dark-light border-transprant"<+6</span<
                                </span<
                              </div<
                            </div<
                            <div class="col-auto"<
                              <div class="avatar-group mb-3"<
                                <span class="avatar avatar-xl avatar-circle"<
                                  <img class="avatar-img" src="assets/img/avatar2.png" alt="Avatar"<
                                </span<
                                <span class="avatar avatar-xl avatar-circle"<
                                  <img class="avatar-img" src="assets/img/avatar3.png" alt="Avatar"<
                                </span<
                                <span class="avatar avatar-xl avatar-circle"<
                                  <img class="avatar-img" src="assets/img/avatar4.png" alt="Avatar"<
                                </span<
                                <span class="avatar avatar-xl avatar-circle"<
                                  <span class="avatar-initials avatar-dark-light border-transprant"<+6</span<
                                </span<
                              </div<
                            </div<

                            <div class="col-auto"<
                              <div class="avatar-group mb-3"<
                                <span class="avatar avatar-lg avatar-circle"<
                                  <img class="avatar-img" src="assets/img/avatar2.png" alt="Avatar"<
                                </span<
                                <span class="avatar avatar-lg avatar-circle"<
                                  <img class="avatar-img" src="assets/img/avatar3.png" alt="Avatar"<
                                </span<
                                <span class="avatar avatar-lg avatar-circle"<
                                  <img class="avatar-img" src="assets/img/avatar4.png" alt="Avatar"<
                                </span<
                                <span class="avatar avatar-lg avatar-circle"<
                                  <span class="avatar-initials avatar-dark-light border-transprant"<+6</span<
                                </span<
                              </div<
                            </div<

                            <div class="col-auto"<
                              <div class="avatar-group mb-3"<
                                <span class="avatar avatar-circle"<
                                  <img class="avatar-img" src="assets/img/avatar2.png" alt="Avatar"<
                                </span<
                                <span class="avatar avatar-circle"<
                                  <img class="avatar-img" src="assets/img/avatar3.png" alt="Avatar"<
                                </span<
                                <span class="avatar avatar-circle"<
                                  <img class="avatar-img" src="assets/img/avatar4.png" alt="Avatar"<
                                </span<
                                <span class="avatar avatar-circle"<
                                  <span class="avatar-initials avatar-dark-light border-transprant"<+6</span<
                                </span<
                              </div<
                            </div<

                            <div class="col-auto"<
                              <div class="avatar-group mb-3"<
                                <span class="avatar avatar-sm avatar-circle"<
                                  <img class="avatar-img" src="assets/img/avatar2.png" alt="Avatar"<
                                </span<
                                <span class="avatar avatar-sm avatar-circle"<
                                  <img class="avatar-img" src="assets/img/avatar3.png" alt="Avatar"<
                                </span<
                                <span class="avatar avatar-sm avatar-circle"<
                                  <img class="avatar-img" src="assets/img/avatar4.png" alt="Avatar"<
                                </span<
                                <span class="avatar avatar-sm avatar-circle"<
                                  <span class="avatar-initials avatar-dark-light border-transprant"<+6</span<
                                </span<
                              </div<
                            </div<

                            <div class="col-auto"<
                              <div class="avatar-group mb-3"<
                                <span class="avatar avatar-xs avatar-circle"<
                                  <img class="avatar-img" src="assets/img/avatar2.png" alt="Avatar"<
                                </span<
                                <span class="avatar avatar-xs avatar-circle"<
                                  <img class="avatar-img" src="assets/img/avatar3.png" alt="Avatar"<
                                </span<
                                <span class="avatar avatar-xs avatar-circle"<
                                  <img class="avatar-img" src="assets/img/avatar4.png" alt="Avatar"<
                                </span<
                                <span class="avatar avatar-xs avatar-circle"<
                                  <span class="avatar-initials avatar-dark-light border-transprant"<+6</span<
                                </span<
                              </div<
                            </div<
                          </div>