List item markup (Vue.js)

list.html

<!-- Tease Group -->
<ul class="tease-group-grid tease-list -social">
  
  <!-- Featured Tease -->
  <li class="tease-grid-item -card -overlay" data-aos="fade-up">
    <svg class="icon-tease-type" viewBox="0 0 100 100"><use xlink:href="#svg-twitter" /></svg>
    <img class="tease-img" v-bind:src="'img/social/' + social.follow.img + '.png'">
    <div class="tease-overlay-content">
      <p class="tease-overlay-title">{{ social.follow.name }}</p>
      <a href="#" class="btn-follow -twitter"><span class="follow-btn-text">{{ social.follow.btn_text }}</span> <span class="follow-btn-points">{{ social.follow.points }}</span></a>
    </div>
  </li>

  <!-- Tease -->
  <li class="tease-grid-item -card" data-aos="fade-up" v-for="item in social.items">
    <img class="tease-img" v-if="item.img" v-bind:src= "'img/social/' + item.img + '.png'">

    <svg class="icon-tease-type" viewBox="0 0 100 100"><use xlink:href="#svg-twitter" /></svg>

    <div class="tease-content">
      <p v-html="item.blurb" class="caption"></p>

      <!-- Tease Handle -->
      <div class="tease-handle">
        <img v-bind:src= "'img/social/' + item.avatar + '.png'">
        <div class="handle-details">
          <div class="detail-row">
            <h6 class="handle-title">{{ item.author }}</h6>
            <svg class="icon-handle-action" viewBox="0 0 100 100"><use xlink:href="#svg-external-link" /></svg>
          </div>
          <div class="detail-row">
            <p class="handle-link">{{ item.handle }}</p>
            <p class="handle-time">{{ item.time }}</p>
          </div>
        </div>
      </div> <!-- .tease-handle -->

    </div>
  </li> <!-- .tease-grid-item -->

</ul>