bdo-theme/pages/partials/_articleList.html

bootstrap 4, cosmo theme, flexbox in action

<div class="article-preview">
  <div class="article-meta">
    <a href="profile.html"><img src="http://i.imgur.com/Qr71crq.jpg" /></a>
    <div class="info">
      <a href="profile.html" class="author">ericsimons</a>
      <span class="date">January 20th</span>
    </div>
    <button class="btn btn-outline-primary btn-sm pull-xs-right">
      <i class="ion-heart"></i> 29
    </button>
  </div>
  <a href="article.html" class="preview-link">
    <h1>How to build webapps that scale</h1>
    <p>Building web applications is not an easy task. It's even hard to make ones that scale.</p>
    <span>Read more...</span>
    <ul class="tag-list">
      <li class="tag-default tag-pill tag-outline">programming</li>
      <li class="tag-default tag-pill tag-outline">web</li>
    </ul>
  </a>
</div>

<div class="article-preview">
  <div class="article-meta">
    <a href="profile.html"><img src="http://i.imgur.com/N4VcUeJ.jpg" /></a>
    <div class="info">
      <a href="profile.html" class="author">Albert Pai</a>
      <span class="date">January 20th</span>
    </div>
    <button class="btn btn-outline-primary btn-sm pull-xs-right">
      <i class="ion-heart"></i> 32
    </button>
  </div>
  <a href="article.html" class="preview-link">
    <h1>The song you won't ever stop singing</h1>
    <p>You've probably heard it before, but not since your childhood. That's right, "John Jacob Jingleheimer Schmidt" is back.</p>
    <span>Read more...</span>
    <ul class="tag-list">
      <li class="tag-default tag-pill tag-outline">songs</li>
      <li class="tag-default tag-pill tag-outline">javascript</li>
      <li class="tag-default tag-pill tag-outline">react</li>
    </ul>
  </a>
</div>