Each box with a green border represents one div with class .hoursItem, which is the templated child element of the parent container div with class .tcg. A YAML array contains data about each store:
stores:
- id: JBR-08
name: Broomfield Outdoor Gear, Farm & Ranch
address: 5005 West 120th Avenue, Broomfield, CO 80020
googleAddress: https://maps.app.goo.gl/5HkY4FUihfrbVM5u8
blackfriday: 7am-
xmaseve: 8am-5pm
nye: 9am-5pm
nyd: 10am-5pm
Each store is another item in the stores YAML array. This array's data is passed into the template:
<div class="tcg">
{% for store in stores %}
<div class="hoursItem">
<h3>
<span class="underline--jax"
>JAX {{ store.name }}</span>
</h3>
<a href="{{ store.googleAddress }}"
alt="{{ store.address }}">
<address>{{ store.address }}</address></a>
<dl>
<dt style="margin-top: 1rem;">Thanksgiving</dt>
<dd>closed</dd>
<dt>Black Friday</dt>
<dd>{{ store.blackfriday }}</dd>
<dt>Christmas Eve</dt>
<dd>{{ store.xmaseve }}</dd>
<dt>Christmas</dt>
<dd>closed</dd>
<dt>New Year's Eve</dt>
<dd>{{ store.nye }}</dd>
<dt>New Year's Day</dt>
<dd>{{ store.nye }}</dd>
</dl>
</div>
{% endfor %}
