Example
Markup
<section class="module">
  <div class="module__content blogpost__list">
    <article class="blogpost">
      <header class="blogpost__header">
        <h1 class="blogpost__title">Awesome Blog Post Title</h1>
        <div class="blogpost__updated">
          November 29, 2017
        </div>
        <div class="blogpost__info">
          <div class="blogpost__author">
            by <a href="#!">John Doe</a> | <a href="#!">15 Comments</a>
          </div>
          <ul class="blogpost__tags blogpost__tags--right">
            <li><a href="#" class="blogpost__tag">Artificial Intelligence</a></li>
            <li><a href="#" class="blogpost__tag">Continuous Engineering</a></li>
            <li><a href="#" class="blogpost__tag">Data Analytics</a></li>
            <li><a href="#" class="blogpost__tag">Machine Learning</a></li>
          </ul>
        </div>
      </header>
      <p>Lorem markdownum praevia? Heu nec! Ita ubi praefractam radiantia visu praecordia, ulla parva, in haec semesaque et nisi, ab forte...</p>
      <a href="#!" class="link">Read more</a>
    </article>
    <article class="blogpost">
      <header class="blogpost__header">
        <h1 class="blogpost__title">Awesome Blog Post Title</h1>
        <div class="blogpost__updated">
          November 29, 2017
        </div>
        <div class="blogpost__info">
          <div class="blogpost__author">
            by <a href="#!">John Doe</a> | <a href="#!">15 Comments</a>
          </div>
          <ul class="blogpost__tags blogpost__tags--right">
            <li><a href="#" class="blogpost__tag">Artificial Intelligence</a></li>
            <li><a href="#" class="blogpost__tag">Continuous Engineering</a></li>
            <li><a href="#" class="blogpost__tag">Data Analytics</a></li>
            <li><a href="#" class="blogpost__tag">Machine Learning</a></li>
          </ul>
        </div>
      </header>
      <p>Lorem markdownum praevia? Heu nec! Ita ubi praefractam radiantia visu praecordia, ulla parva, in haec semesaque et nisi, ab forte...</p>
      <a href="#!" class="link">Read more</a>
    </article>
    <article class="blogpost">
      <header class="blogpost__header">
        <h1 class="blogpost__title">Awesome Blog Post Title</h1>
        <div class="blogpost__updated">
          November 29, 2017
        </div>
        <div class="blogpost__info">
          <div class="blogpost__author">
            by <a href="#!">John Doe</a> | <a href="#!">15 Comments</a>
          </div>
          <ul class="blogpost__tags blogpost__tags--right">
            <li><a href="#" class="blogpost__tag">Artificial Intelligence</a></li>
            <li><a href="#" class="blogpost__tag">Continuous Engineering</a></li>
            <li><a href="#" class="blogpost__tag">Data Analytics</a></li>
            <li><a href="#" class="blogpost__tag">Machine Learning</a></li>
          </ul>
        </div>
      </header>
      <p>Lorem markdownum praevia? Heu nec! Ita ubi praefractam radiantia visu praecordia, ulla parva, in haec semesaque et nisi, ab forte...</p>
      <a href="#!" class="link">Read more</a>
    </article>
  </div>
</section>
Source: scss/components/blog/_blog.scss, line 133