---
layout: sidebar-v1
title: Profile
---

<div class="toolbar-v1-fixed-wrap">{{> toolbar-v1}}</div>

<!-- Container -->
<div
  id="minimal-profile"
  class="container"
  data-open-sidebar
  data-page-title="Profile"
>
  {{> toolbar-v1}}

  <!--Wrapper-->
  <div class="minimal-profile-wrapper">
    <!--Cover image-->
    <div class="profile-cover is-sidebar-v1">
      <img
        class="cover-image"
        src="https://via.placeholder.com/1600x460"
        data-demo-src="assets/img/demo/bg/4.png"
        alt=""
      />
    </div>

    <!--General Info-->
    <div class="profile-info is-sidebar-v1">
      <div class="left">
        <div class="profile-avatar">
          <img
            id="user-avatar-minimal"
            src="https://via.placeholder.com/300x300"
            data-demo-src="assets/img/avatars/jenna.png"
            alt=""
          />
          <button
            class="button is-solid secondary-button raised modal-trigger"
            data-modal="change-profile-pic-modal"
          >
            <i data-feather="plus"></i>
          </button>
        </div>
        <a
          class="button is-fullwidth modal-trigger"
          data-modal="change-cover-modal"
        >
          <i data-feather="camera"></i>
          <span>Update Cover</span>
        </a>
      </div>

      <div class="right">
        <div class="head">
          <h2>Jenna Davis</h2>
          <div class="actions">
            <a class="button is-solid secondary-button raised">Follow</a>
          </div>
        </div>
        <div class="stats">
          <span>174 posts</span>
          <span>12K Followers</span>
          <span>104 Following</span>
        </div>
        <div class="bio">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Iam enim
            adesse poterit. Quis est tam dissimile homini. At ille pellit, qui
            permulcet sensum voluptate. Vide, quaeso, rectumne sit. Primum quid
            tu dicis breve?
          </p>
        </div>
      </div>
    </div>

    <!--Posts Grid-->
    <div class="profile-grid">
      <div class="columns is-multiline">
        <!--Post-->
        <div class="column is-4">
          <div class="card profile-post">
            <div class="card-image">
              <figure class="image is-4by3">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/39.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/39.jpg"
                    alt=""
                  />
                </a>
              </figure>
            </div>
          </div>
        </div>
        <!--Post-->
        <div class="column is-4">
          <div class="card profile-post">
            <div class="card-image">
              <figure class="image is-4by3">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/51.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/51.jpg"
                    alt=""
                  />
                </a>
              </figure>
            </div>
          </div>
        </div>
        <!--Post-->
        <div class="column is-4">
          <div class="card profile-post">
            <div class="card-image">
              <figure class="image is-4by3">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/47.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/47.jpg"
                    alt=""
                  />
                </a>
              </figure>
            </div>
          </div>
        </div>
        <!--Post-->
        <div class="column is-4">
          <div class="card profile-post">
            <div class="card-image">
              <figure class="image is-4by3">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/43.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/43.jpg"
                    alt=""
                  />
                </a>
              </figure>
            </div>
          </div>
        </div>
        <!--Post-->
        <div class="column is-4">
          <div class="card profile-post">
            <div class="card-image">
              <figure class="image is-4by3">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/40.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/40.jpg"
                    alt=""
                  />
                </a>
              </figure>
            </div>
          </div>
        </div>
        <!--Post-->
        <div class="column is-4">
          <div class="card profile-post">
            <div class="card-image">
              <figure class="image is-4by3">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/35.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/35.jpg"
                    alt=""
                  />
                </a>
              </figure>
            </div>
          </div>
        </div>
        <!--Post-->
        <div class="column is-4">
          <div class="card profile-post">
            <div class="card-image">
              <figure class="image is-4by3">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/46.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/46.jpg"
                    alt=""
                  />
                </a>
              </figure>
            </div>
          </div>
        </div>
        <!--Post-->
        <div class="column is-4">
          <div class="card profile-post">
            <div class="card-image">
              <figure class="image is-4by3">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/18.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/18.jpg"
                    alt=""
                  />
                </a>
              </figure>
            </div>
          </div>
        </div>
        <!--Post-->
        <div class="column is-4">
          <div class="card profile-post">
            <div class="card-image">
              <figure class="image is-4by3">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/33.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/33.jpg"
                    alt=""
                  />
                </a>
              </figure>
            </div>
          </div>
        </div>
        <!--Post-->
        <div class="column is-4">
          <div class="card profile-post">
            <div class="card-image">
              <figure class="image is-4by3">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/32.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/32.jpg"
                    alt=""
                  />
                </a>
              </figure>
            </div>
          </div>
        </div>
        <!--Post-->
        <div class="column is-4">
          <div class="card profile-post">
            <div class="card-image">
              <figure class="image is-4by3">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/12.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/12.jpg"
                    alt=""
                  />
                </a>
              </figure>
            </div>
          </div>
        </div>
        <!--Post-->
        <div class="column is-4">
          <div class="card profile-post">
            <div class="card-image">
              <figure class="image is-4by3">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/49.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/49.jpg"
                    alt=""
                  />
                </a>
              </figure>
            </div>
          </div>
        </div>
        <!--Post-->
        <div class="column is-4">
          <div class="card profile-post">
            <div class="card-image">
              <figure class="image is-4by3">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/54.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/54.jpg"
                    alt=""
                  />
                </a>
              </figure>
            </div>
          </div>
        </div>
        <!--Post-->
        <div class="column is-4">
          <div class="card profile-post">
            <div class="card-image">
              <figure class="image is-4by3">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/34.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/34.jpg"
                    alt=""
                  />
                </a>
              </figure>
            </div>
          </div>
        </div>
      </div>

      <!-- Load more posts -->
      <div class="load-more-wrap narrow-top has-text-centered">
        <a href="#" class="load-more-button">Load More</a>
      </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}}