<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 "Filtra" -->
<a class="c-filters__toggle j-filters__toggle" href="javascript:;">
Filtra
<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">
<div class="c-filter__type">
<p class="c-filter__title">Cliente</p>
<ul class="c-filter__list">
<li class="c-filter__item">
<a class="c-filter__link" href="#">Cultura</a>
</li>
<li class="c-filter__item">
<a class="c-filter__link" href="#">Impresa</a>
</li>
<li class="c-filter__item">
<a class="c-filter__link" href="#">Istituzioni</a>
</li>
<li class="c-filter__item">
<a class="c-filter__link" href="#">Editoria</a>
</li>
<li class="c-filter__item">
<a class="c-filter__link" href="#">Eventi</a>
</li>
</ul>
</div>
<div class="c-filter__type">
<p class="c-filter__title">Progetto</p>
<ul class="c-filter__list">
<li class="c-filter__item">
<a class="c-filter__link" href="#">Identità visiva</a>
</li>
<li class="c-filter__item">
<a class="c-filter__link" href="#">Webdesign</a>
</li>
<li class="c-filter__item">
<a class="c-filter__link" href="#">Campagne</a>
</li>
<li class="c-filter__item">
<a class="c-filter__link" href="#">Book design</a>
</li>
<li class="c-filter__item">
<a class="c-filter__link" href="#">Packaging</a>
</li>
<li class="c-filter__item">
<a class="c-filter__link" href="#">Ambienti</a>
</li>
</ul>
</div>
</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 "Filtra" -->
<a class="c-filters__toggle j-filters__toggle" href="javascript:;">
Filtra
<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>
<!-- list -->
<div class="c-filters__list">
{% for singleFilter in filtersList %}
<div class="c-filter__type">
<p class="c-filter__title">{{ singleFilter.type }}</p>
<ul class="c-filter__list">
{% for item in singleFilter.list %}
<li class="c-filter__item">
<a class="c-filter__link" href="#">{{ item }}</a>
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
</div>
</div>
{
"items": [
{
"imgSrc": "http://emmaboshi.net/pics/extra/Bollettino-Boshi.png",
"img": {
"src": "http://emmaboshi.net/pics/extra/Bollettino-Boshi.png",
"alt": "progetto 01"
},
"link": {
"url": "http://emmaboshi.net/extra/bollettino-boshi",
"label": "Vai al progetto"
},
"title": "Bollettino Boshi",
"abstract": "Il Bollettino è la mia newsletter informale, spedita a cadenza imprevedibile. "
},
{
"imgSrc": "http://emmaboshi.net/pics/extra/bottiato.jpg",
"img": {
"src": "http://emmaboshi.net/pics/extra/bottiato.jpg",
"alt": "progetto 01"
},
"link": {
"url": "http://emmaboshi.net/extra/bollettino-boshi",
"label": "Vai al progetto"
},
"title": "Franco Bottiato",
"abstract": "Un bot per Facebook Messenger, con la personalità di Franco Bottiato."
},
{
"imgSrc": "http://emmaboshi.net/pics/extra/Radio-Boshi2.jpg",
"img": {
"src": "http://emmaboshi.net/pics/extra/Radio-Boshi2.jpg",
"alt": "progetto 01"
},
"link": {
"url": "http://emmaboshi.net/extra/bollettino-boshi",
"label": "Vai al progetto"
},
"title": "Radio Boshi",
"abstract": "Un canale Telegram di messaggi vocali inaspettati."
}
],
"_keys": [
"type",
"items"
],
"type": "post-preview",
"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