---
title: Timeline
---

{{#extend "layout-default"}}
  {{#content "css_vendor" mode="append"}}
    <link rel="stylesheet" href="{{global}}/vendor/plyr/plyr.css">
  {{/content}}


  {{#content "js_vendor" mode="append"}}
    <script src="{{global}}/vendor/jquery-appear/jquery.appear.js"></script>
    <script src="{{global}}/vendor/plyr/plyr.js"></script>
  {{/content}}

  {{#content "js" mode="append"}}
    <script src="{{global}}/js/Plugin/plyr.js"></script>
  {{/content}}


  {{#content "scripts" mode="replace"}}
    <script src="{{assets}}/examples/js/structure/timeline.js"></script>
  {{/content}}

  {{#content "body"}}

    <!-- Page -->
    <div class="page">
      <div class="page-header page-header-bordered">
        <h1 class="page-title">Timeline</h1>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="{{dest 'index.html'}}">Home</a></li>
          <li class="breadcrumb-item active">Structure</li>
        </ol>
        <div class="page-header-actions">
          <form>
            <div class="input-search input-search-dark">
              <i class="input-search-icon md-search" aria-hidden="true"></i>
              <input type="text" class="form-control" name="" placeholder="Search...">
            </div>
          </form>
        </div>
      </div>

      <div class="page-content container">
        <!-- Timeline -->
        <ul class="timeline timeline-icon">
          <li class="timeline-period">MAY 2017</li>
          <li class="timeline-item">
            <div class="timeline-dot">
              <i class="icon md-image" aria-hidden="true"></i>
            </div>
            <div class="timeline-info">
              <time datetime="2017-05-15">2 Days ago</time>
            </div>
            <div class="timeline-content">
              <div class="card card-shadow">
                <div class="card-img-top cover">
                  <img class="cover-image" src="{{global}}/photos/placeholder.png" alt="...">
                </div>
              </div>
            </div>
          </li>

          <li class="timeline-item timeline-reverse">
            <div class="timeline-dot bg-green-500">
              <i class="icon md-file" aria-hidden="true"></i>
            </div>
            <div class="timeline-info">
              <time datetime="2017-05-15">2 Days ago</time>
            </div>
            <div class="timeline-content">
              <div class="card card-article card-shadow">
                <div class="card-img-top cover">
                  <img class="cover-image" src="{{global}}/photos/placeholder.png" alt="...">
                </div>
                <div class="card-block">
                  <h3 class="card-title">Lorem Ipsum Dolor</h3>
                  <p class="card-text">
                    <small>MAY 15, 2017</small>
                  </p>
                  <p>Novum formidines congressus atomorum nam permulta alterum delectatio
                    gaudeat statim. Necessariae dicturam perspexit utrum modo amicitiae
                    malum summumque, multis ante iudicia desiderat, civitas iudicare
                    attingere, amori perpaulum mediocrium, dicere notae litteras
                    plusque appareat, remotis fama futurove quandam assentiar integre
                    poenis. </p>
                </div>
                <div class="card-block">
                  <div class="card-actions float-right">
                    <a href="javascript:void(0)">
                  <i class="icon md-comment-more" aria-hidden="true"></i>
                  <span>2500</span>
                </a>
                    <a href="javascript:void(0)">
                  <i class="icon md-favorite" aria-hidden="true"></i>
                  <span>20</span>
                </a>
                  </div>
                  <a class="btn btn-primary card-link" href="javascript:void(0)">Read More</a>
                </div>
              </div>
            </div>
          </li>

          <li class="timeline-item">
            <div class="timeline-dot bg-orange-500">
              <i class="md-quote"></i>
            </div>
            <div class="timeline-info">
              <time datetime="2017-05-08">9 Days ago</time>
            </div>
            <div class="timeline-content">
              <div class="card card-shadow">
                <div class="card-header cover">
                  <div class="cover-background p-30" style="background-image: url('{{global}}/photos/placeholder.png')">
                    <blockquote class="blockquote cover-quote white card-blockquote">Asperner solvantur fere queo meam videtur temperantiam. Timorem
                      asperner. Hortensio delicatissimi nihilo disserunt, contemnit
                      mi amentur doctrinis logikh triario, appetendi utamur fames.
                      </blockquote>
                  </div>
                </div>
              </div>
            </div>
          </li>

          <li class="timeline-period">Apr 2017</li>
          <li class="timeline-item">
            <div class="timeline-dot bg-green-500">
              <i class="icon md-file" aria-hidden="true"></i>
            </div>
            <div class="timeline-info">
              <time datetime="2017-04-08">1 Month ago</time>
            </div>
            <div class="timeline-content">
              <div class="card card-shadow">
                <div class="card-img-top cover">
                  <img class="cover-image" src="{{global}}/photos/placeholder.png" alt="...">
                </div>
                <div class="card-block">
                  <h3 class="card-title">Lorem Ipsum Dolor</h3>
                  <p class="card-text">
                    <small>MAY 08, 2017</small>
                  </p>
                  <p>Signiferumque dixit, arbitrium iudicia nominis, potione aeterno
                    genus conducunt deinde incidunt horrent forte voluptate pericula,
                    mortis deleniti, circumcisaque mala sentit iucundius pedalis.
                    Claudicare inanium fugiat contenta dixisset animumque iure
                    quoquo dicturam, defendit militaris sollicitudines, verear,
                    amicorum manum discedere indignae loqui. </p>
                </div>
                <div class="card-block">
                  <div class="card-actions float-right">
                    <a href="javascript:void(0)">
                  <i class="icon md-comment-more" aria-hidden="true"></i>
                  <span>2500</span>
                </a>
                    <a href="javascript:void(0)">
                  <i class="icon md-favorite" aria-hidden="true"></i>
                  <span>20</span>
                </a>
                  </div>
                  <a class="btn btn-primary card-link" href="javascript:void(0)">Read More</a>
                </div>
              </div>
            </div>
          </li>

          <li class="timeline-item timeline-reverse">
            <div class="timeline-dot bg-orange-600">
              <i class="md-quote"></i>
            </div>
            <div class="timeline-info">
              <time datetime="2017-04-08">1 Month ago</time>
            </div>
            <div class="timeline-content">
              <div class="card card-shadow">
                <div class="card-header cover">
                  <div class="cover-background p-30" style="background-image: url('{{global}}/photos/placeholder.png')">
                    <blockquote class="blockquote cover-quote white card-blockquote">Ostendis peccandi pertinaces disputandum primus arare morbos
                      noster, privamur alios perpetiuntur nulla est, effecerit
                      corpora doctrina sentiunt hinc quasi, tradere perveniri erigimur.
                      </blockquote>
                  </div>
                </div>
              </div>
            </div>
          </li>

          <li class="timeline-item timeline-reverse">
            <div class="timeline-dot bg-cyan-600">
              <i class="icon md-tv-play" aria-hidden="true"></i>
            </div>
            <div class="timeline-info">
              <time datetime="2017-04-08">1 Month ago</time>
            </div>
            <div class="timeline-content">
              <div class="card card-shadow">
                <div class="card-header cover player" data-plugin="plyr">
                  <video poster="{{assets}}/examples/images/poster.jpg" controls crossorigin>
                    <!-- Video Files -->
                    <source type="video/mp4" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4">
                    <source type="video/webm" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm">

                    <!-- Text Track File -->
                    <track kind="captions" label="English" srclang="en" src="//cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
                      default>

                    <!-- Fallback For Browsers That Don'T Support The <Video> Element -->
                    <a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4">Download</a>
                  </video>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <!-- End Timeline -->
      </div>
    </div>
    <!-- End Page -->

  {{/content}}
{{/extend}}