---
layout: sidebar-v1
title: Stories
---

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

<!-- Container -->
<div
  id="stories-feed"
  class="container sidebar-boxed"
  data-open-sidebar
  data-page-title="Stories"
>
  <div class="stories-wrapper is-home is-full">
    {{> toolbar-v1}}

    <!-- Stories -->
    <div class="inner-wrapper">
      <!-- Stories content -->
      <div class="stories-content">
        <div class="stories-container">
          <div class="container-inner">
            <a class="story modal-trigger" data-modal="new-story-modal">
              <div class="story-avatar">
                <img
                  class="avatar"
                  src="https://via.placeholder.com/150x150"
                  data-demo-src="assets/img/avatars/jenna.png"
                  data-user-popover="0"
                  alt=""
                />
                <div class="add-overlay">
                  <i data-feather="plus"></i>
                </div>
              </div>
            </a>
            <a class="story">
              <div class="story-avatar">
                <img
                  class="avatar"
                  src="https://via.placeholder.com/150x150"
                  data-demo-src="assets/img/avatars/dan.jpg"
                  data-user-popover="1"
                  alt=""
                />
              </div>
            </a>
            <a class="story">
              <div class="story-avatar">
                <img
                  class="avatar"
                  src="https://via.placeholder.com/150x150"
                  data-demo-src="assets/img/avatars/bobby.jpg"
                  data-user-popover="8"
                  alt=""
                />
              </div>
            </a>
            <a class="story">
              <div class="story-avatar">
                <img
                  class="avatar"
                  src="https://via.placeholder.com/150x150"
                  data-demo-src="assets/img/avatars/stella.jpg"
                  data-user-popover="2"
                  alt=""
                />
              </div>
            </a>
            <a class="story">
              <div class="story-avatar">
                <img
                  class="avatar"
                  src="https://via.placeholder.com/150x150"
                  data-demo-src="assets/img/avatars/milly.jpg"
                  data-user-popover="7"
                  alt=""
                />
              </div>
            </a>
            <a class="story">
              <div class="story-avatar">
                <img
                  class="avatar"
                  src="https://via.placeholder.com/150x150"
                  data-demo-src="assets/img/avatars/elise.jpg"
                  data-user-popover="4"
                  alt=""
                />
              </div>
            </a>
            <a class="story">
              <div class="story-avatar">
                <img
                  class="avatar"
                  src="https://via.placeholder.com/150x150"
                  data-demo-src="assets/img/avatars/lana.jpeg"
                  data-user-popover="10"
                  alt=""
                />
              </div>
            </a>
            <a class="story">
              <div class="story-avatar">
                <img
                  class="avatar"
                  src="https://via.placeholder.com/150x150"
                  data-demo-src="assets/img/avatars/david.jpg"
                  data-user-popover="4"
                  alt=""
                />
              </div>
            </a>
            <a class="story">
              <div class="story-avatar">
                <img
                  class="avatar"
                  src="https://via.placeholder.com/150x150"
                  data-demo-src="assets/img/avatars/mike.jpg"
                  data-user-popover="12"
                  alt=""
                />
              </div>
            </a>
            <a class="story">
              <div class="story-avatar">
                <img
                  class="avatar"
                  src="https://via.placeholder.com/150x150"
                  data-demo-src="assets/img/avatars/azzouz.jpg"
                  data-user-popover="20"
                  alt=""
                />
              </div>
            </a>
          </div>
        </div>

        <div class="section-title">
          <h2>Feed</h2>

          <div class="dropdown is-spaced is-right is-accent dropdown-trigger">
            <div>
              <div class="button is-rounded">This week</div>
            </div>
            <div class="dropdown-menu" role="menu">
              <div class="dropdown-content">
                <a href="#" class="dropdown-item">
                  <div class="media">
                    <i data-feather="wind"></i>
                    <div class="media-content">
                      <h3>Today</h3>
                      <small>View today's posts.</small>
                    </div>
                  </div>
                </a>
                <a class="dropdown-item">
                  <div class="media">
                    <i data-feather="calendar"></i>
                    <div class="media-content">
                      <h3>This Week</h3>
                      <small>View this week's posts.</small>
                    </div>
                  </div>
                </a>
                <a class="dropdown-item">
                  <div class="media">
                    <i data-feather="archive"></i>
                    <div class="media-content">
                      <h3>This Month</h3>
                      <small>View this month's posts.</small>
                    </div>
                  </div>
                </a>
                <hr class="dropdown-divider" />
                <a href="#" class="dropdown-item">
                  <div class="media">
                    <i data-feather="users"></i>
                    <div class="media-content">
                      <h3>Close Friends</h3>
                      <small>Restrict to close friends.</small>
                    </div>
                  </div>
                </a>
                <a href="#" class="dropdown-item">
                  <div class="media">
                    <i data-feather="heart"></i>
                    <div class="media-content">
                      <h3>Popular</h3>
                      <small>Show popular posts.</small>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>

        <div class="stories-feed">
          <div class="columns is-multiline">
            <div class="column is-4 is-half-tablet">
              <!--Feed item-->
              <div class="story-feed-item is-medium">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/3.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    class="featured-image"
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/3.jpg"
                    alt=""
                  />
                </a>
                <a class="item-meta">
                  <div class="user-info">
                    <div class="small-avatar">
                      <img
                        class="avatar"
                        src="https://via.placeholder.com/150x150"
                        data-demo-src="assets/img/avatars/stella.jpg"
                        data-user-popover="2"
                        alt=""
                      />
                    </div>
                    <span>Stella Bergmann</span>
                  </div>
                  <div class="item-stats">
                    <div class="stat-item">
                      <i data-feather="heart"></i>
                      <span>43</span>
                    </div>
                    <div class="stat-item">
                      <i data-feather="message-circle"></i>
                      <span>12</span>
                    </div>
                  </div>
                </a>
              </div>

              <!--Feed item-->
              <div class="story-feed-item">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/17.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    class="featured-image"
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/17.jpg"
                    alt=""
                  />
                </a>
                <a class="item-meta">
                  <div class="user-info">
                    <div class="small-avatar">
                      <img
                        class="avatar"
                        src="https://via.placeholder.com/150x150"
                        data-demo-src="assets/img/avatars/azzouz.jpg"
                        data-user-popover="20"
                        alt=""
                      />
                    </div>
                    <span>Azzouz El Paytoun</span>
                  </div>
                  <div class="item-stats">
                    <div class="stat-item">
                      <i data-feather="heart"></i>
                      <span>55</span>
                    </div>
                    <div class="stat-item">
                      <i data-feather="message-circle"></i>
                      <span>7</span>
                    </div>
                  </div>
                </a>
              </div>

              <!--Feed item-->
              <div class="story-feed-item is-large">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/23.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    class="featured-image"
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/23.jpg"
                    alt=""
                  />
                </a>
                <a class="item-meta">
                  <div class="user-info">
                    <div class="small-avatar">
                      <img
                        class="avatar"
                        src="https://via.placeholder.com/150x150"
                        data-demo-src="assets/img/avatars/jenna.png"
                        data-user-popover="0"
                        alt=""
                      />
                    </div>
                    <span>Jenna Davis</span>
                  </div>
                  <div class="item-stats">
                    <div class="stat-item">
                      <i data-feather="heart"></i>
                      <span>155</span>
                    </div>
                    <div class="stat-item">
                      <i data-feather="message-circle"></i>
                      <span>49</span>
                    </div>
                  </div>
                </a>
              </div>

              <!--Feed item-->
              <div class="story-feed-item">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/26.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    class="featured-image"
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/26.jpg"
                    alt=""
                  />
                </a>
                <a class="item-meta">
                  <div class="user-info">
                    <div class="small-avatar">
                      <img
                        class="avatar"
                        src="https://via.placeholder.com/150x150"
                        data-demo-src="assets/img/avatars/lana.jpeg"
                        data-user-popover="10"
                        alt=""
                      />
                    </div>
                    <span>Lana Henrikssen</span>
                  </div>
                  <div class="item-stats">
                    <div class="stat-item">
                      <i data-feather="heart"></i>
                      <span>99</span>
                    </div>
                    <div class="stat-item">
                      <i data-feather="message-circle"></i>
                      <span>23</span>
                    </div>
                  </div>
                </a>
              </div>

              <!--Feed item-->
              <div class="story-feed-item is-medium">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/37.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    class="featured-image"
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/37.jpg"
                    alt=""
                  />
                </a>
                <a class="item-meta">
                  <div class="user-info">
                    <div class="small-avatar">
                      <img
                        class="avatar"
                        src="https://via.placeholder.com/150x150"
                        data-demo-src="assets/img/avatars/mike.jpg"
                        data-user-popover="12"
                        alt=""
                      />
                    </div>
                    <span>Mike Lasalle</span>
                  </div>
                  <div class="item-stats">
                    <div class="stat-item">
                      <i data-feather="heart"></i>
                      <span>14</span>
                    </div>
                    <div class="stat-item">
                      <i data-feather="message-circle"></i>
                      <span>3</span>
                    </div>
                  </div>
                </a>
              </div>
            </div>

            <div class="column is-4 is-half-tablet">
              <!--Feed item-->
              <div class="story-feed-item">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/4.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    class="featured-image"
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/4.jpg"
                    alt=""
                  />
                </a>
                <a class="item-meta">
                  <div class="user-info">
                    <div class="small-avatar">
                      <img
                        class="avatar"
                        src="https://via.placeholder.com/150x150"
                        data-demo-src="assets/img/avatars/dan.jpg"
                        data-user-popover="1"
                        alt=""
                      />
                    </div>
                    <span>Dan Walker</span>
                  </div>
                  <div class="item-stats">
                    <div class="stat-item">
                      <i data-feather="heart"></i>
                      <span>18</span>
                    </div>
                    <div class="stat-item">
                      <i data-feather="message-circle"></i>
                      <span>2</span>
                    </div>
                  </div>
                </a>
              </div>
              <!--Feed item-->
              <div class="story-feed-item is-large">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/33.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    class="featured-image"
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/33.jpg"
                    alt=""
                  />
                </a>
                <a class="item-meta">
                  <div class="user-info">
                    <div class="small-avatar">
                      <img
                        class="avatar"
                        src="https://via.placeholder.com/150x150"
                        data-demo-src="assets/img/avatars/elise.jpg"
                        data-user-popover="6"
                        alt=""
                      />
                    </div>
                    <span>Elise Walker</span>
                  </div>
                  <div class="item-stats">
                    <div class="stat-item">
                      <i data-feather="heart"></i>
                      <span>55</span>
                    </div>
                    <div class="stat-item">
                      <i data-feather="message-circle"></i>
                      <span>9</span>
                    </div>
                  </div>
                </a>
              </div>
              <!--Feed item-->
              <div class="story-feed-item">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/18.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    class="featured-image"
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/18.jpg"
                    alt=""
                  />
                </a>
                <a class="item-meta">
                  <div class="user-info">
                    <div class="small-avatar">
                      <img
                        class="avatar"
                        src="https://via.placeholder.com/150x150"
                        data-demo-src="assets/img/avatars/rolf.jpg"
                        data-user-popover="13"
                        alt=""
                      />
                    </div>
                    <span>Rolf Krupp</span>
                  </div>
                  <div class="item-stats">
                    <div class="stat-item">
                      <i data-feather="heart"></i>
                      <span>12</span>
                    </div>
                    <div class="stat-item">
                      <i data-feather="message-circle"></i>
                      <span>0</span>
                    </div>
                  </div>
                </a>
              </div>
              <!--Feed item-->
              <div class="story-feed-item is-large">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/36.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    class="featured-image"
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/36.jpg"
                    alt=""
                  />
                </a>
                <a class="item-meta">
                  <div class="user-info">
                    <div class="small-avatar">
                      <img
                        class="avatar"
                        src="https://via.placeholder.com/150x150"
                        data-demo-src="assets/img/avatars/gaelle.jpeg"
                        data-user-popover="11"
                        alt=""
                      />
                    </div>
                    <span>Gaelle Morris</span>
                  </div>
                  <div class="item-stats">
                    <div class="stat-item">
                      <i data-feather="heart"></i>
                      <span>265</span>
                    </div>
                    <div class="stat-item">
                      <i data-feather="message-circle"></i>
                      <span>56</span>
                    </div>
                  </div>
                </a>
              </div>
              <!--Feed item-->
              <div class="story-feed-item is-medium">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/11.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    class="featured-image"
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/11.jpg"
                    alt=""
                  />
                </a>
                <a class="item-meta">
                  <div class="user-info">
                    <div class="small-avatar">
                      <img
                        class="avatar"
                        src="https://via.placeholder.com/150x150"
                        data-demo-src="assets/img/avatars/david.jpg"
                        data-user-popover="4"
                        alt=""
                      />
                    </div>
                    <span>David Kim</span>
                  </div>
                  <div class="item-stats">
                    <div class="stat-item">
                      <i data-feather="heart"></i>
                      <span>459</span>
                    </div>
                    <div class="stat-item">
                      <i data-feather="message-circle"></i>
                      <span>154</span>
                    </div>
                  </div>
                </a>
              </div>
            </div>

            <div class="column is-4 is-half-tablet">
              <!--Feed item-->
              <div class="story-feed-item is-large">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/21.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    class="featured-image"
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/21.jpg"
                    alt=""
                  />
                </a>
                <a class="item-meta">
                  <div class="user-info">
                    <div class="small-avatar">
                      <img
                        class="avatar"
                        src="https://via.placeholder.com/150x150"
                        data-demo-src="assets/img/avatars/bobby.jpg"
                        data-user-popover="8"
                        alt=""
                      />
                    </div>
                    <span>Bobby Brown</span>
                  </div>
                  <div class="item-stats">
                    <div class="stat-item">
                      <i data-feather="heart"></i>
                      <span>65</span>
                    </div>
                    <div class="stat-item">
                      <i data-feather="message-circle"></i>
                      <span>17</span>
                    </div>
                  </div>
                </a>
              </div>
              <!--Feed item-->
              <div class="story-feed-item">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/32.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    class="featured-image"
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/32.jpg"
                    alt=""
                  />
                </a>
                <a class="item-meta">
                  <div class="user-info">
                    <div class="small-avatar">
                      <img
                        class="avatar"
                        src="https://via.placeholder.com/150x150"
                        data-demo-src="assets/img/avatars/milly.jpg"
                        data-user-popover="7"
                        alt=""
                      />
                    </div>
                    <span>Milly Augustine</span>
                  </div>
                  <div class="item-stats">
                    <div class="stat-item">
                      <i data-feather="heart"></i>
                      <span>76</span>
                    </div>
                    <div class="stat-item">
                      <i data-feather="message-circle"></i>
                      <span>32</span>
                    </div>
                  </div>
                </a>
              </div>
              <!--Feed item-->
              <div class="story-feed-item is-medium">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/24.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    class="featured-image"
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/24.jpg"
                    alt=""
                  />
                </a>
                <a class="item-meta">
                  <div class="user-info">
                    <div class="small-avatar">
                      <img
                        class="avatar"
                        src="https://via.placeholder.com/150x150"
                        data-demo-src="assets/img/avatars/stella.jpg"
                        data-user-popover="2"
                        alt=""
                      />
                    </div>
                    <span>Stella Bergmann</span>
                  </div>
                  <div class="item-stats">
                    <div class="stat-item">
                      <i data-feather="heart"></i>
                      <span>89</span>
                    </div>
                    <div class="stat-item">
                      <i data-feather="message-circle"></i>
                      <span>44</span>
                    </div>
                  </div>
                </a>
              </div>
              <!--Feed item-->
              <div class="story-feed-item is-medium">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/35.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    class="featured-image"
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/35.jpg"
                    alt=""
                  />
                </a>
                <a class="item-meta">
                  <div class="user-info">
                    <div class="small-avatar">
                      <img
                        class="avatar"
                        src="https://via.placeholder.com/150x150"
                        data-demo-src="assets/img/avatars/dan.jpg"
                        data-user-popover="1"
                        alt=""
                      />
                    </div>
                    <span>Dan Walker</span>
                  </div>
                  <div class="item-stats">
                    <div class="stat-item">
                      <i data-feather="heart"></i>
                      <span>55</span>
                    </div>
                    <div class="stat-item">
                      <i data-feather="message-circle"></i>
                      <span>5</span>
                    </div>
                  </div>
                </a>
              </div>
              <!--Feed item-->
              <div class="story-feed-item is-medium">
                <a
                  href="https://via.placeholder.com/1600x900"
                  data-demo-href="assets/img/demo/unsplash/20.jpg"
                  data-fancybox
                  data-caption=""
                >
                  <img
                    class="featured-image"
                    src="https://via.placeholder.com/1600x900"
                    data-demo-src="assets/img/demo/unsplash/20.jpg"
                    alt=""
                  />
                </a>
                <a class="item-meta">
                  <div class="user-info">
                    <div class="small-avatar">
                      <img
                        class="avatar"
                        src="https://via.placeholder.com/150x150"
                        data-demo-src="assets/img/avatars/jenna.png"
                        data-user-popover="0"
                        alt=""
                      />
                    </div>
                    <span>Jenna Davis</span>
                  </div>
                  <div class="item-stats">
                    <div class="stat-item">
                      <i data-feather="heart"></i>
                      <span>197</span>
                    </div>
                    <div class="stat-item">
                      <i data-feather="message-circle"></i>
                      <span>78</span>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- /html/partials/pages/stories/modals/new-story-modal.html -->
{{> new-story-modal}}

<!-- /html/partials/pages/stories/modals/video-story-modal.html -->
{{> video-story-modal}}

<!-- /html/partials/pages/stories/modals/image-story-modal.html -->
{{> image-story-modal}}