<!-- Message card -->
<div
  id="msg-card-0"
  data-preview-id="0"
  class="card is-msg has-attachment is-active"
>
  <div class="card-content">
    <div class="msg-header">
      <span class="msg-from">
        <small>From: <a>@Dan</a></small>
      </span>
      <span class="msg-attachment">
        <i data-feather="paperclip"></i>
      </span>
      <span class="msg-timestamp">oct 23 2018</span>
    </div>
    <div class="msg-subject">
      <i data-feather="star"></i>
      <span>Hey there</span>
    </div>
    <div class="msg-snippet">
      <p>
        Corporis tempora id quae fuga. Perspiciatis quam magnam dolores ut quia.
        Neque vero non laudantium animi omnis qui debitis minus molestias. Est
        ut minus est dolores quo harum illum suscipit cumque.
      </p>
    </div>
  </div>
</div>
<!-- /Message card -->

<!-- Message card -->
<div id="msg-card-1" data-preview-id="1" class="card is-msg">
  <div class="card-content">
    <div class="msg-header">
      <span class="msg-from">
        <small>From: <a>@Nelly</a></small>
      </span>
      <span class="msg-attachment">
        <i data-feather="paperclip"></i>
      </span>
      <span class="msg-timestamp">oct 19 2018</span>
    </div>
    <div class="msg-subject">
      <i data-feather="star"></i>
      <span>Send me the files</span>
    </div>
    <div class="msg-snippet">
      <p>
        Corporis tempora id quae fuga. Perspiciatis quam magnam dolores ut quia.
        Neque vero non laudantium animi omnis qui debitis minus molestias. Est
        ut minus est dolores quo harum illum suscipit cumque.
      </p>
    </div>
  </div>
</div>
<!-- /Message card -->

<!-- Message card -->
<div id="msg-card-2" data-preview-id="2" class="card is-msg">
  <div class="card-content">
    <div class="msg-header">
      <span class="msg-from">
        <small>From: <a>@Milly</a></small>
      </span>
      <span class="msg-attachment">
        <i data-feather="paperclip"></i>
      </span>
      <span class="msg-timestamp">oct 18 2018</span>
    </div>
    <div class="msg-subject">
      <i data-feather="star"></i>
      <span>About friday night</span>
    </div>
    <div class="msg-snippet">
      <p>
        Corporis tempora id quae fuga. Perspiciatis quam magnam dolores ut quia.
        Neque vero non laudantium animi omnis qui debitis minus molestias. Est
        ut minus est dolores quo harum illum suscipit cumque.
      </p>
    </div>
  </div>
</div>
<!-- /Message card -->

<!-- Message card -->
<div id="msg-card-3" data-preview-id="3" class="card is-msg has-attachment">
  <div class="card-content">
    <div class="msg-header">
      <span class="msg-from">
        <small>From: <a>@Dan</a></small>
      </span>
      <span class="msg-attachment">
        <i data-feather="paperclip"></i>
      </span>
      <span class="msg-timestamp">oct 12 2018</span>
    </div>
    <div class="msg-subject">
      <i data-feather="star"></i>
      <span>Angular Books</span>
    </div>
    <div class="msg-snippet">
      <p>
        Corporis tempora id quae fuga. Perspiciatis quam magnam dolores ut quia.
        Neque vero non laudantium animi omnis qui debitis minus molestias. Est
        ut minus est dolores quo harum illum suscipit cumque.
      </p>
    </div>
  </div>
</div>
<!-- /Message card -->

<!-- Message card -->
<div id="msg-card-4" data-preview-id="4" class="card is-msg has-attachment">
  <div class="card-content">
    <div class="msg-header">
      <span class="msg-from">
        <small>From: <a>@David</a></small>
      </span>
      <span class="msg-attachment">
        <i data-feather="paperclip"></i>
      </span>
      <span class="msg-timestamp">oct 10 2018</span>
    </div>
    <div class="msg-subject">
      <i data-feather="star"></i>
      <span>Starcraft 2 videos</span>
    </div>
    <div class="msg-snippet">
      <p>
        Corporis tempora id quae fuga. Perspiciatis quam magnam dolores ut quia.
        Neque vero non laudantium animi omnis qui debitis minus molestias. Est
        ut minus est dolores quo harum illum suscipit cumque.
      </p>
    </div>
  </div>
</div>
<!-- /Message card -->

<!-- Message card -->
<div id="msg-card-5" data-preview-id="5" class="card is-msg">
  <div class="card-content">
    <div class="msg-header">
      <span class="msg-from">
        <small>From: <a>@Mike</a></small>
      </span>
      <span class="msg-attachment">
        <i data-feather="paperclip"></i>
      </span>
      <span class="msg-timestamp">oct 04 2018</span>
    </div>
    <div class="msg-subject">
      <i data-feather="star"></i>
      <span>Just reviewed your proposal</span>
    </div>
    <div class="msg-snippet">
      <p>
        Corporis tempora id quae fuga. Perspiciatis quam magnam dolores ut quia.
        Neque vero non laudantium animi omnis qui debitis minus molestias. Est
        ut minus est dolores quo harum illum suscipit cumque.
      </p>
    </div>
  </div>
</div>
<!-- /Message card -->

<!-- Message card -->
<div id="msg-card-6" data-preview-id="6" class="card is-msg">
  <div class="card-content">
    <div class="msg-header">
      <span class="msg-from">
        <small>From: <a>@Elise</a></small>
      </span>
      <span class="msg-attachment">
        <i data-feather="paperclip"></i>
      </span>
      <span class="msg-timestamp">sept 27 2018</span>
    </div>
    <div class="msg-subject">
      <i data-feather="star"></i>
      <span>Iam coming back</span>
    </div>
    <div class="msg-snippet">
      <p>
        Corporis tempora id quae fuga. Perspiciatis quam magnam dolores ut quia.
        Neque vero non laudantium animi omnis qui debitis minus molestias. Est
        ut minus est dolores quo harum illum suscipit cumque.
      </p>
    </div>
  </div>
</div>
<!-- /Message card -->

<!-- Message card -->
<div id="msg-card-7" data-preview-id="7" class="card is-msg has-attachment">
  <div class="card-content">
    <div class="msg-header">
      <span class="msg-from">
        <small>From: <a>@Daniel</a></small>
      </span>
      <span class="msg-attachment">
        <i data-feather="paperclip"></i>
      </span>
      <span class="msg-timestamp">sept 21 2018</span>
    </div>
    <div class="msg-subject">
      <i data-feather="star"></i>
      <span>Pictures from last weekend</span>
    </div>
    <div class="msg-snippet">
      <p>
        Corporis tempora id quae fuga. Perspiciatis quam magnam dolores ut quia.
        Neque vero non laudantium animi omnis qui debitis minus molestias. Est
        ut minus est dolores quo harum illum suscipit cumque.
      </p>
    </div>
  </div>
</div>
<!-- /Message card -->

<!-- Message card -->
<div id="msg-card-8" data-preview-id="8" class="card is-msg">
  <div class="card-content">
    <div class="msg-header">
      <span class="msg-from">
        <small>From: <a>@Lana</a></small>
      </span>
      <span class="msg-attachment">
        <i data-feather="paperclip"></i>
      </span>
      <span class="msg-timestamp">sept 16 2018</span>
    </div>
    <div class="msg-subject">
      <i data-feather="star"></i>
      <span>Black Friday is coming!</span>
    </div>
    <div class="msg-snippet">
      <p>
        Corporis tempora id quae fuga. Perspiciatis quam magnam dolores ut quia.
        Neque vero non laudantium animi omnis qui debitis minus molestias. Est
        ut minus est dolores quo harum illum suscipit cumque.
      </p>
    </div>
  </div>
</div>
<!-- /Message card -->

<!-- Message card -->
<div id="msg-card-9" data-preview-id="9" class="card is-msg has-attachment">
  <div class="card-content">
    <div class="msg-header">
      <span class="msg-from">
        <small>From: <a>@Rolf</a></small>
      </span>
      <span class="msg-attachment">
        <i data-feather="paperclip"></i>
      </span>
      <span class="msg-timestamp">sept 14 2018</span>
    </div>
    <div class="msg-subject">
      <i data-feather="star"></i>
      <span>Project files</span>
    </div>
    <div class="msg-snippet">
      <p>
        Corporis tempora id quae fuga. Perspiciatis quam magnam dolores ut quia.
        Neque vero non laudantium animi omnis qui debitis minus molestias. Est
        ut minus est dolores quo harum illum suscipit cumque.
      </p>
    </div>
  </div>
</div>
<!-- /Message card -->

<!-- Message card -->
<div id="msg-card-10" data-preview-id="10" class="card is-msg has-attachment">
  <div class="card-content">
    <div class="msg-header">
      <span class="msg-from">
        <small>From: <a>@Dan</a></small>
      </span>
      <span class="msg-attachment">
        <i data-feather="paperclip"></i>
      </span>
      <span class="msg-timestamp">sept 07 2018</span>
    </div>
    <div class="msg-subject">
      <i data-feather="star"></i>
      <span>Just watch this...</span>
    </div>
    <div class="msg-snippet">
      <p>
        Corporis tempora id quae fuga. Perspiciatis quam magnam dolores ut quia.
        Neque vero non laudantium animi omnis qui debitis minus molestias. Est
        ut minus est dolores quo harum illum suscipit cumque.
      </p>
    </div>
  </div>
</div>
<!-- /Message card -->
