path: root/_includes/post-card.liquid

<div class="card">
  <div class="card-header">
    <div class="card-header-title">
      <h1 class="subtitle">
        {{ post.title }}
      </h1>
    </div>
  </div>
  {% if post.data.coverImage %}
  <div class="card-image">
    <figure class="image is-4by3">
      <picture>
        <source srcset="{{post.data.coverImage}}.webp" type="image/webp" />
        <source srcset="{{post.data.coverImage}}.png" type="image/png" />
        <img src="{{post.data.coverImage}}.png" />
      </picture>
    </figure>
  </div>
  {% endif %}
  <div class="card-content">
    <div class="content">
      {{ post.content | truncatewords: 20 }}
      <a target="_blank" href="{{ post.permalink}}">
        <span class="icon">
          <i class="iconify" data-icon="open-in-new"></i>
        </span>
        Read more
      </a>
    </div>
  </div>
  <div class="card-footer">
    <div class="card-footer-item">
      Share on LinkedIn
    </div>
    <div class="card-footer-item">
      Share on Facebook
    </div>
  </div>
</div>