This is an example of how to write Nunjucks loop to display posts as a card. This will show all pages with a tag of design and front matter data variables postImg, postImgAlt, and description.

card-example.njk

<main class="design cards">
    <h2 class="cards_header">Graphic Design Projects</h2>
    {%- for page in collections.design %}
    <div class="pjcard">
      <div class="card_img">
          <a href="{{page.url}}"><img src="/images/{{page.data.postImg}}" alt="{{page.data.postImgAlt}}"></a></div>
      <div class="card_text">
        <h3><a href="{{page.url}}">{{page.data.title}}</a></h3>
        <p>{{page.data.description}}<p>
      </div>
    </div> 
    </div>
    {%- endfor %}
</main>

page.md

title	page title
layout	base.njk
tags	work design
postImg	photo.jpg
postImgAlt	alt text
description	Brief Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis expedita fuga molestiae ullam magni. Velit.

page content would go here