Publicize docs

Post

---

Post component are used for displaying article

Basic post component

<article class="post">
  <h3 class="post-title">Article Title</h3>
  <div class="post-meta"><a href="" class="post-author">John Doe</a> | <a href="" class="post-date">1 Hours Ago</a></div>
  <div class="post-content"></div>
</article>

For multicolumn post, wrap it with row and add col- class

<div class="row">
  <article class="post col-12 col-4">
    <h3 class="post-title">Article Title</h3>
    <div class="post-meta"><a href="" class="post-author">John Doe</a> | <a href="" class="post-date">1 Hours Ago</a></div>
    <div class="post-content"></div>
  </article>
</div>

Post Summary

To display post summary, add post-summary class.

<div class="row">
  <article class="post post-summary post-light col-12 col-md-4">
    <a href="article-sidebar.html" class="post-overlay-link overlay"></a>
      <div class="row">
        <div class="col-3 col-xl-4 pl-0 order-7">
          <figure class="figure post-thumbnail mb-0">
            <div class="overlay bg-primary o-0 o-hover-1"></div>
            <div class="overlay bg-dark o-0 o-hover-2"></div>
            <img src="path_to_image" class="img w-100 figure-img mb-0" alt="Image">
          </figure>
        </div>
        <!-- /.col-3 col-xl-4 pl-0 order-7 -->
        <div class="col-9 col-xl-8 d-flex flex-column order-5 ">
          <h3 class="post-title h6">
          <a href="article-sidebar.html">10 Ways Phone and Tablet Can Work Together</a><span class="post-meta"> –</span> <span class="post-meta post-time"><a href="#">44 mins ago</a></span> </h3>
        </div>
        <!-- /.col-9 col-xl-8 d-flex flex-column order-5 -->
      </div>
      <!-- /.row -->
  </article>
  <article class="post post-summary post-light col-12 col-md-4">
    <a href="article-sidebar.html" class="post-overlay-link overlay"></a>
      <div class="row">
        <div class="col-3 col-xl-4 pl-0 order-7">
          <figure class="figure post-thumbnail mb-0">
            <div class="overlay bg-primary o-0 o-hover-1"></div>
            <div class="overlay bg-dark o-0 o-hover-2"></div>
            <img src="path_to_image" class="img w-100 figure-img mb-0" alt="Image">
          </figure>
        </div>
        <!-- /.col-3 col-xl-4 pl-0 order-7 -->
        <div class="col-9 col-xl-8 d-flex flex-column order-5 ">
          <h3 class="post-title h6">
          <a href="article-sidebar.html">10 Ways Phone and Tablet Can Work Together</a><span class="post-meta"> –</span> <span class="post-meta post-time"><a href="#">44 mins ago</a></span> </h3>
        </div>
        <!-- /.col-9 col-xl-8 d-flex flex-column order-5 -->
      </div>
      <!-- /.row -->
  </article>
  <article class="post post-summary post-light col-12 col-md-4">
    <a href="article-sidebar.html" class="post-overlay-link overlay"></a>
      <div class="row">
        <div class="col-3 col-xl-4 pl-0 order-7">
          <figure class="figure post-thumbnail mb-0">
            <div class="overlay bg-primary o-0 o-hover-1"></div>
            <div class="overlay bg-dark o-0 o-hover-2"></div>
            <img src="path_to_image" class="img w-100 figure-img mb-0" alt="Image">
          </figure>
        </div>
        <!-- /.col-3 col-xl-4 pl-0 order-7 -->
        <div class="col-9 col-xl-8 d-flex flex-column order-5 ">
          <h3 class="post-title h6">
          <a href="article-sidebar.html">10 Ways Phone and Tablet Can Work Together</a><span class="post-meta"> –</span> <span class="post-meta post-time"><a href="#">44 mins ago</a></span> </h3>
        </div>
        <!-- /.col-9 col-xl-8 d-flex flex-column order-5 -->
      </div>
      <!-- /.row -->
  </article>
</div>

The result: