How can I iterate over an array of front matter data in Eleventy?

Question

I am building a static website using HTML templates and eleventy. I have some front matter data e.g. the page's title. That data also includes an array of items I want to display. The official documentation for Eleventy doesn't include sample code for arrays. The example for collections doesn't work here. What's the right syntax?

Answer 1

Given the following sample front matter data (in yaml):

---
layout: home.html
title: My sweet title
boxes: 
 - title: Overview
   url: overview.html
   desc: What is this?
   img: images/pic01.jpg
 - title: Language
   url: language.html
   desc: Understand the basics of this
   img: images/pic02.jpg
---

This is how the HTML template should iterate over the code:

{%- for box in boxes -%}
<article>
    <span class="image">
        <img src="{{box.img}}" alt="" />
    </span>
    <header class="major">
        <h3><a href="{{box.url}}" class="link">{{box.title}}</a></h3>
        <p>{{box.desc}}</p>
    </header>
</article>
{%- endfor -%}