Yuika/partials/post-card.hbs

<article class="post-card">
  <a href="{{url}}">
    {{> post-background}} {{!--Special header-image.hbs partial to generate the background image--}}
  </a>
  <div class="post-card__info">
    <div class="post-card__tag-row">
      {{#if primary_tag}}
      {{#primary_tag}}
      <a href="{{url}}">
        {{#if accent_color}}
        <span class="post-card__tag-color" style="background-color: {{accent_color}};"></span>
        {{else}}
        <span class="post-card__tag-color"></span>
        {{/if}}
        <span class="post-card__tag-name">{{name}}</span>
      </a>
      {{/primary_tag}}
      {{/if}}
      {{#has visibility="paid"}}
      <a href="/subscribe">
        <span class="post-card__paywall">Paid content</span>
      </a>
      {{/has}}
      {{#has visibility="members"}}
      <a href="/subscribe">
        <span class="post-card__paywall">Member-exclusive</span>
      </a>
      {{/has}}
    </div>
    <a href="{{url}}">
      <h1 class="post-card__title">{{title}}</h1>
    </a>
    <p class="post-card__time">
      <span>
        <time datetime="{{date format=" YYYY-MM-DD"}}">
          {{date format="D MMM YYYY"}}
        </time>
        <span class="bull">&bull;</span>
        {{reading_time}}
      </span>
    </p>
    {{#if authors}}
    <div class="post-card__author-list">
      <div class="post-card__author-images">
        {{#foreach authors}}
        {{#if profile_image}}
        <div class="post-card__author-image">
          <a href="{{url}}">
            <img src="{{img_url profile_image size=" xs"}}" alt="{{name}}" />
          </a>
        </div>
        {{/if}}
        {{/foreach}}
      </div>
      <div class="post-card__author-names">
        <p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p>
      </div>
    </div>
    {{/if}}
    <div class="post-card__excerpt">
      <p>{{excerpt words="30"}}</p>
    </div>
  </div>
</article>