{% if context %}

  {% set title = context.title %}
  {% set list = context.list %}
  {% set title = context.title %}
  {% set svg = context.svg %}
  {% set component_modifier = context.component_modifier %}
  {% set list_modifier = context.list_modifier %}

{% endif %}


<div class="vf-links {%- if component_modifier %} {{ component_modifier }}{% endif %}">
  {% if title %}
  <h3 class="vf-links__heading">{{ title }}</h3>
  {% endif %}
  <ul class="vf-links__list {%- if list_modifier %} vf-links__list--{{ list_modifier}}{% endif %} | vf-list">
    {% for item in list %}
    <li class="vf-list__item">
      <a class="vf-list__link" href="{{ item.link_list_href }}">
        {% if item.image %}
          {% if item.image == "blank" %}
            <span><!-- no image --></span>
            {% else %}
            {{ item.image }}
          {% endif %}
        {% endif %}
        {{ item.text }}
        {% if svg %}
        <svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"/></svg>
        {% endif %}
      </a>
      {% if item.badge %}
        {% set badge = '@vf-badge' %}
        {% render badge, { 'context': item.badge } %}
      {% endif %}
      {% if item.meta %}
        <p class="vf-links__meta">{{ item.meta }}</p>
      {% endif %}

    </li>
    {% endfor %}
  </ul>
</div>