Pattern library

Icon List

View full screen

Details

Source (Nunjucks)

<ul class="w-icon-list">
{% for item in data.items %}
<li class="w-icon-list__item w-icon-list__item--{{ data.icon }}">
<a href="{{ item.url }}" class="w-path-link">{{ item.text }}</a>
</li>
{% endfor %}
</ul>

Output

<ul class="w-icon-list">

<li class="w-icon-list__item w-icon-list__item--check">
<a href="#" class="w-path-link">Overview</a>
</li>

<li class="w-icon-list__item w-icon-list__item--check">
<a href="#" class="w-path-link">Web Vitals Metrics</a>
</li>

<li class="w-icon-list__item w-icon-list__item--check">
<a href="#" class="w-path-link">Measure Web Vitals</a>
</li>

<li class="w-icon-list__item w-icon-list__item--check">
<a href="#" class="w-path-link">Debug Web Vitals</a>
</li>

<li class="w-icon-list__item w-icon-list__item--check">
<a href="#" class="w-path-link">Improve Web Vitals</a>
</li>

<li class="w-icon-list__item w-icon-list__item--check">
<a href="#" class="w-path-link">Best Practices</a>
</li>

</ul>