---
layout: default
title: Profile Friends
---

<!-- Container -->
<div class="container is-custom">
  <!-- Profile page main wrapper -->
  <div id="profile-friends" class="view-wrap is-headless">
    <div class="columns is-multiline no-margin">
      <!-- Left side column -->
      <div class="column is-paddingless">
        <!-- Timeline Header -->
        <!-- html/partials/pages/profile/timeline/timeline-header.html -->
        {{> timeline-header}}
      </div>
    </div>

    <div class="columns">
      <div class="column">
        <div class="box-heading">
          <div
            class="dropdown friends-dropdown is-spaced is-neutral dropdown-trigger"
          >
            <div>
              <div class="button">
                <span>All Friends</span>
                <i data-feather="chevron-down"></i>
              </div>
            </div>
            <div class="dropdown-menu" role="menu">
              <div class="dropdown-content">
                <a href="#" class="dropdown-item">
                  <div class="media">
                    <i data-feather="heart"></i>
                    <div class="media-content">
                      <h3>Close Friends</h3>
                      <small>Your closest friends list.</small>
                    </div>
                  </div>
                </a>
                <a class="dropdown-item">
                  <div class="media">
                    <i data-feather="bell"></i>
                    <div class="media-content">
                      <h3>Followed</h3>
                      <small>Friends you are following.</small>
                    </div>
                  </div>
                </a>
                <a class="dropdown-item">
                  <div class="media">
                    <i data-feather="coffee"></i>
                    <div class="media-content">
                      <h3>Work relations</h3>
                      <small>Your work relations.</small>
                    </div>
                  </div>
                </a>
                <hr class="dropdown-divider" />
                <a
                  class="dropdown-item modal-trigger"
                  data-modal="albums-modal"
                >
                  <div class="media">
                    <i data-feather="mail"></i>
                    <div class="media-content">
                      <h3>Friend Requests</h3>
                      <small>Your pending friend requests.</small>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>

          <div class="control heading-search">
            <input
              type="text"
              class="input is-rounded"
              placeholder="Search Friends..."
            />
            <div class="search-icon">
              <i data-feather="search"></i>
            </div>
          </div>
        </div>

        <!--Friends grid-->
        <div class="friends-grid">
          <div class="columns is-multiline">
            <!--Friend item-->
            <div class="column is-3">
              <a class="friend-item has-text-centered">
                <div class="avatar-wrap">
                  <div class="circle"></div>
                  <div class="chat-button">
                    <i data-feather="message-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/milly.jpg"
                    data-user-popover="7"
                    alt=""
                  />
                </div>
                <h3>Milly Augustine</h3>
                <p>From Rome</p>
              </a>
            </div>
            <!--Friend item-->
            <div class="column is-3">
              <a class="friend-item has-text-centered">
                <div class="avatar-wrap">
                  <div class="circle"></div>
                  <div class="chat-button">
                    <i data-feather="message-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/dan.jpg"
                    data-user-popover="1"
                    alt=""
                  />
                </div>
                <h3>Dan Walker</h3>
                <p>From New York</p>
              </a>
            </div>
            <!--Friend item-->
            <div class="column is-3">
              <a class="friend-item has-text-centered">
                <div class="avatar-wrap">
                  <div class="circle"></div>
                  <div class="chat-button">
                    <i data-feather="message-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/stella.jpg"
                    data-user-popover="2"
                    alt=""
                  />
                </div>
                <h3>Stella Bergmann</h3>
                <p>From Berlin</p>
              </a>
            </div>
            <!--Friend item-->
            <div class="column is-3">
              <a class="friend-item has-text-centered">
                <div class="avatar-wrap">
                  <div class="circle"></div>
                  <div class="chat-button">
                    <i data-feather="message-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/david.jpg"
                    data-user-popover="4"
                    alt=""
                  />
                </div>
                <h3>David Kim</h3>
                <p>From Chicago</p>
              </a>
            </div>
            <!--Friend item-->
            <div class="column is-3">
              <a class="friend-item has-text-centered">
                <div class="avatar-wrap">
                  <div class="circle"></div>
                  <div class="chat-button">
                    <i data-feather="message-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/daniel.jpg"
                    data-user-popover="3"
                    alt=""
                  />
                </div>
                <h3>Daniel Wellington</h3>
                <p>From London</p>
              </a>
            </div>
            <!--Friend item-->
            <div class="column is-3">
              <a class="friend-item has-text-centered">
                <div class="avatar-wrap">
                  <div class="circle"></div>
                  <div class="chat-button">
                    <i data-feather="message-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/nelly.png"
                    data-user-popover="9"
                    alt=""
                  />
                </div>
                <h3>Nelly Schwartz</h3>
                <p>From Melbourne</p>
              </a>
            </div>
            <!--Friend item-->
            <div class="column is-3">
              <a class="friend-item has-text-centered">
                <div class="avatar-wrap">
                  <div class="circle"></div>
                  <div class="chat-button">
                    <i data-feather="message-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/rolf.jpg"
                    data-user-popover="13"
                    alt=""
                  />
                </div>
                <h3>Rolf Krupp</h3>
                <p>From Berlin</p>
              </a>
            </div>
            <!--Friend item-->
            <div class="column is-3">
              <a class="friend-item has-text-centered">
                <div class="avatar-wrap">
                  <div class="circle"></div>
                  <div class="chat-button">
                    <i data-feather="message-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/brian.jpg"
                    data-user-popover="19"
                    alt=""
                  />
                </div>
                <h3>Brian Stevenson</h3>
                <p>From San Diego</p>
              </a>
            </div>
            <!--Friend item-->
            <div class="column is-3">
              <a class="friend-item has-text-centered">
                <div class="avatar-wrap">
                  <div class="circle"></div>
                  <div class="chat-button">
                    <i data-feather="message-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/bobby.jpg"
                    data-user-popover="8"
                    alt=""
                  />
                </div>
                <h3>Bobby Brown</h3>
                <p>From Paris</p>
              </a>
            </div>
            <!--Friend item-->
            <div class="column is-3">
              <a class="friend-item has-text-centered">
                <div class="avatar-wrap">
                  <div class="circle"></div>
                  <div class="chat-button">
                    <i data-feather="message-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/azzouz.jpg"
                    data-user-popover="20"
                    alt=""
                  />
                </div>
                <h3>Azzouz El Paytoun</h3>
                <p>From Montreal</p>
              </a>
            </div>
            <!--Friend item-->
            <div class="column is-3">
              <a class="friend-item has-text-centered">
                <div class="avatar-wrap">
                  <div class="circle"></div>
                  <div class="chat-button">
                    <i data-feather="message-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/elise.jpg"
                    data-user-popover="6"
                    alt=""
                  />
                </div>
                <h3>Elise Walker</h3>
                <p>From London</p>
              </a>
            </div>
            <!--Friend item-->
            <div class="column is-3">
              <a class="friend-item has-text-centered">
                <div class="avatar-wrap">
                  <div class="circle"></div>
                  <div class="chat-button">
                    <i data-feather="message-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/aline.jpg"
                    data-user-popover="16"
                    alt=""
                  />
                </div>
                <h3>Aline Cambell</h3>
                <p>From Seattle</p>
              </a>
            </div>
            <!--Friend item-->
            <div class="column is-3">
              <a class="friend-item has-text-centered">
                <div class="avatar-wrap">
                  <div class="circle"></div>
                  <div class="chat-button">
                    <i data-feather="message-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/mike.jpg"
                    data-user-popover="12"
                    alt=""
                  />
                </div>
                <h3>Mike Lasalle</h3>
                <p>From Toronto</p>
              </a>
            </div>
            <!--Friend item-->
            <div class="column is-3">
              <a class="friend-item has-text-centered">
                <div class="avatar-wrap">
                  <div class="circle"></div>
                  <div class="chat-button">
                    <i data-feather="message-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/michael.jpg"
                    data-user-popover="17"
                    alt=""
                  />
                </div>
                <h3>Mike Donovan</h3>
                <p>From San Francisco</p>
              </a>
            </div>
            <!--Friend item-->
            <div class="column is-3">
              <a class="friend-item has-text-centered">
                <div class="avatar-wrap">
                  <div class="circle"></div>
                  <div class="chat-button">
                    <i data-feather="message-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/lana.jpeg"
                    data-user-popover="10"
                    alt=""
                  />
                </div>
                <h3>Lana Henrikssen</h3>
                <p>From Helsinki</p>
              </a>
            </div>
            <!--Friend item-->
            <div class="column is-3">
              <a class="friend-item has-text-centered">
                <div class="avatar-wrap">
                  <div class="circle"></div>
                  <div class="chat-button">
                    <i data-feather="message-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/leana.jpg"
                    data-user-popover="15"
                    alt=""
                  />
                </div>
                <h3>Leana Marks</h3>
                <p>From Nashville</p>
              </a>
            </div>
            <!--Friend item-->
            <div class="column is-3">
              <a class="friend-item has-text-centered">
                <div class="avatar-wrap">
                  <div class="circle"></div>
                  <div class="chat-button">
                    <i data-feather="message-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/ken.jpg"
                    data-user-popover="14"
                    alt=""
                  />
                </div>
                <h3>Ken Rogers</h3>
                <p>From Chicago</p>
              </a>
            </div>
            <!--Friend item-->
            <div class="column is-3">
              <a class="friend-item has-text-centered">
                <div class="avatar-wrap">
                  <div class="circle"></div>
                  <div class="chat-button">
                    <i data-feather="message-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/gaelle.jpeg"
                    data-user-popover="11"
                    alt=""
                  />
                </div>
                <h3>Gaelle Morris</h3>
                <p>From Lyon</p>
              </a>
            </div>
            <!--Friend item-->
            <div class="column is-3">
              <a class="friend-item has-text-centered">
                <div class="avatar-wrap">
                  <div class="circle"></div>
                  <div class="chat-button">
                    <i data-feather="message-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/edward.jpeg"
                    data-user-popover="5"
                    alt=""
                  />
                </div>
                <h3>Edward Mayers</h3>
                <p>From Dublin</p>
              </a>
            </div>
            <!--Friend item-->
            <div class="column is-3">
              <a class="friend-item has-text-centered">
                <div class="avatar-wrap">
                  <div class="circle"></div>
                  <div class="chat-button">
                    <i data-feather="message-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/george.jpg"
                    data-user-popover="18"
                    alt=""
                  />
                </div>
                <h3>George A. Romero</h3>
                <p>From Los Angeles</p>
              </a>
            </div>
          </div>
        </div>

        <!-- Load more photos -->
        <div class="load-more-wrap has-text-centered">
          <a href="#" class="load-more-button">Load More</a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Change cover image modal -->
<!--html/partials/pages/profile/timeline/modals/change-cover-modal.html-->
{{> change-cover-modal}}

<!-- Change profile pic modal -->
<!--html/partials/pages/profile/timeline/modals/change-profile-pic-modal.html-->
{{> change-profile-pic-modal}}

<!-- User photos and albums -->
<!--html/partials/pages/profile/timeline/modals/user-photos-modal.html-->
{{> user-photos-modal}}

<!-- Profile picture crop modal -->
<!--html/partials/pages/profile/timeline/modals/upload-crop-profile-modal.html-->
{{> upload-crop-profile-modal}}

<!-- Cover image crop modal -->
<!--html/partials/pages/profile/timeline/modals/upload-crop-cover-modal.html-->
{{> upload-crop-cover-modal}}