Incorporating an atomic pattern and passing data from a JSON array is my goal. Below are the code snippets and JSON file.
anchor-link.mustache
<a href="{{ url }}" class="{{ class }}">{{ label }}</a>
footer-nav.mustache
<ul class="menu vertical">
{{# footerNav }}
<li>{{> atoms-anchor-link(url:url, label : label, class : class) }}</li>
{{/ footerNav }}
</ul>
JSON for populating anchor mustache
{
"footerNav": [{
"label": "Shop",
"url": "#",
"class": "body-copy"
}, {
"label": "Pods",
"url": "#",
"class": "all-caps-large"
}]
}
Output
<ul class="menu vertical">
<li><a href="" class=""></a>
</li>
<li><a href="" class=""></a>
</li>
</ul>
Pattern Lab successfully generates correct HTML with anchors created, but the values are not being populated in the anchors.
Appreciate any assistance in advance!!!!