<div class="c-filters j-filters c-filtersTitle--identity">

    <!-- filters main title -->
    <h1 class="c-filters__title u-align-center">
        <span>Progetti/di/</span>
        <span class="c-filters__category">
            Identità visiva
            <a class="c-filters__clear" href="#"><svg class="icon-close" height="18" viewBox="0 0 18 18" width="18" xmlns="http://www.w3.org/2000/svg">
                    <path class="icon-path" d="m15.4527946 1.46666667-6.4527946 6.46040404-6.45279461-6.46040404-1.08053872 1.08053872 6.46040404 6.45279461-6.46040404 6.4527946 1.08053872 1.0805387 6.45279461-6.460404 6.4527946 6.460404 1.0805387-1.0805387-6.460404-6.4527946 6.460404-6.45279461z" />
                </svg>
            </a>
        </span>
    </h1>

    <div class="l-module l-grid__intro u-align-center">
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum, necessitatibus!
        </p>
    </div>

    <div class="c-filters__wrapper">
        <!-- toggle "Cliente" "Progetto" -->
        Filtra per:
        <a class="c-filters__toggle j-toggle-cliente" data-togglr-exclusive="is-active" data-togglr-target=".j-target-cliente, .j-toggle-cliente" href="javascript:;">
            Cliente
            <span class="c-filters__icon c-filters__icon--open"><svg class="icon-plus" height="18" viewBox="0 0 18 18" width="18" xmlns="http://www.w3.org/2000/svg">
                    <path class="icon-path" d="m10 10v6h-2v-6h-6v-2h6v-6h2v6h6v2z" />
                </svg>
            </span>
            <span class="c-filters__icon c-filters__icon--close"><svg class="icon-less" height="18" viewBox="0 0 18 18" width="18" xmlns="http://www.w3.org/2000/svg">
                    <path class="icon-path" d="m16 10h-14v-2h14z" />
                </svg>
            </span>
        </a>
        <a class="c-filters__toggle j-toggle-progetto" data-togglr-exclusive="is-active" data-togglr-target=".j-target-progetto, .j-toggle-progetto" href="javascript:;">
            Progetto
            <span class="c-filters__icon c-filters__icon--open"><svg class="icon-plus" height="18" viewBox="0 0 18 18" width="18" xmlns="http://www.w3.org/2000/svg">
                    <path class="icon-path" d="m10 10v6h-2v-6h-6v-2h6v-6h2v6h6v2z" />
                </svg>
            </span>
            <span class="c-filters__icon c-filters__icon--close"><svg class="icon-less" height="18" viewBox="0 0 18 18" width="18" xmlns="http://www.w3.org/2000/svg">
                    <path class="icon-path" d="m16 10h-14v-2h14z" />
                </svg>
            </span>
        </a>
        <!-- list -->
        <div class="c-filters__list">
            <ul class="c-filter__list c-blogMenu j-target-cliente">
                <li class="c-filter__item c-blogMenu__item">
                    <a class="c-filter__link" href="#">Cultura</a>
                </li>
                <li class="c-filter__item c-blogMenu__item">
                    <a class="c-filter__link" href="#">Impresa</a>
                </li>
                <li class="c-filter__item c-blogMenu__item">
                    <a class="c-filter__link" href="#">Istituzioni</a>
                </li>
                <li class="c-filter__item c-blogMenu__item">
                    <a class="c-filter__link" href="#">Editoria</a>
                </li>
                <li class="c-filter__item c-blogMenu__item">
                    <a class="c-filter__link" href="#">Eventi</a>
                </li>
            </ul>
            <ul class="c-filter__list c-blogMenu j-target-progetto">
                <li class="c-filter__item c-blogMenu__item">
                    <a class="c-filter__link" href="#">Identità visiva</a>
                </li>
                <li class="c-filter__item c-blogMenu__item">
                    <a class="c-filter__link" href="#">Webdesign</a>
                </li>
                <li class="c-filter__item c-blogMenu__item">
                    <a class="c-filter__link" href="#">Campagne</a>
                </li>
                <li class="c-filter__item c-blogMenu__item">
                    <a class="c-filter__link" href="#">Book design</a>
                </li>
                <li class="c-filter__item c-blogMenu__item">
                    <a class="c-filter__link" href="#">Packaging</a>
                </li>
                <li class="c-filter__item c-blogMenu__item">
                    <a class="c-filter__link" href="#">Ambienti</a>
                </li>
            </ul>
        </div>
    </div>

</div>
<div class="c-filters j-filters {{ modifier }}">

  <!-- filters main title -->
  {% if title %}
    <h1 class="c-filters__title u-align-center">
      <span>{{ title }}</span>
      <span class="c-filters__category">
        {{ category }}
        <a class="c-filters__clear" href="#">{% render '@icon-close' %}</a>
      </span>
    </h1>
  {% endif %}


  <div class="l-module l-grid__intro u-align-center">
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum, necessitatibus!
    </p>
  </div>

  <div class="c-filters__wrapper">
    <!-- toggle "Cliente" "Progetto" -->
    Filtra per:
    {% for singleFilter in filtersList %}
    <a
      class="c-filters__toggle j-toggle-{{ singleFilter.type|lower }}"
      data-togglr-exclusive="is-active"
      data-togglr-target=".j-target-{{ singleFilter.type|lower }}, .j-toggle-{{ singleFilter.type|lower }}"
      href="javascript:;"
    >
      {{ singleFilter.type }}
      <span class="c-filters__icon c-filters__icon--open">{% render '@icon-plus' %}</span>
      <span class="c-filters__icon c-filters__icon--close">{% render '@icon-less' %}</span>
    </a>
    {% endfor %}
    <!-- list -->
    <div class="c-filters__list">
      {% for singleFilter in filtersList %}
        <ul class="c-filter__list c-blogMenu j-target-{{ singleFilter.type|lower }}">
          {% for item in singleFilter.list %}
            <li class="c-filter__item c-blogMenu__item">
              <a class="c-filter__link" href="#">{{ item }}</a>
            </li>
          {% endfor %}
        </ul>
      {% endfor %}
    </div>
  </div>

</div>
{
  "title": "Progetti/di/",
  "category": "Identità visiva",
  "filtersList": [
    {
      "type": "Cliente",
      "list": [
        "Cultura",
        "Impresa",
        "Istituzioni",
        "Editoria",
        "Eventi"
      ]
    },
    {
      "type": "Progetto",
      "list": [
        "Identità visiva",
        "Webdesign",
        "Campagne",
        "Book design",
        "Packaging",
        "Ambienti"
      ]
    }
  ],
  "modifier": "c-filtersTitle--identity"
}

Variante per progetti di Identità visiva