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

page content would go here