<section class="py-8 md:py-20 n7-background-gray-02">
<div class="xl:container px-8 mx-auto">
<div class="gap-2 pb-8 md:pb-12">
<h2 class="text-3xl md:text-4xl">Titolo sezione</h2>
</div>
<div class="grid gap-6 md:grid-cols-3">
<article class="n7-card p-4
is-card-fullclickable transition hover:shadow-lg group">
<div class="grid gap-2.5 md:gap-4">
<div class="n7-card__heading flex flex-col-reverse gap-2.5 md:gap-4">
<h3 class="n7-card__title text-xl md:text-2xl font-bold">
<a class="hover:underline group-hover:underline" href="">
Manuale Anagrafe delle Aziende Agricole
<span class="flex gap-0.5 items-center pt-1 md:pt-2 text-sm md:text-base font-medium n7-content-03">
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#outline--document-text" />
</svg>
<span class="sr-only">, </span>PDF - 120Kb
</span>
</a>
</h3>
</div>
<p class="n7-card__excerpt text-sm md:text-base">
Testo aggiuntivo da configurazione
</p>
</div>
</article>
<article class="n7-card p-4
is-card-fullclickable transition hover:shadow-lg group">
<div class="grid gap-2.5 md:gap-4">
<div class="n7-card__heading flex flex-col-reverse gap-2.5 md:gap-4">
<h3 class="n7-card__title text-xl md:text-2xl font-bold">
<a class="hover:underline group-hover:underline" href="">
Manuale Anagrafe delle Aziende Agricole
<span class="flex gap-0.5 items-center pt-1 md:pt-2 text-sm md:text-base font-medium n7-content-03">
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#outline--document-text" />
</svg>
<span class="sr-only">, </span>PDF - 120Kb
</span>
</a>
</h3>
</div>
<p class="n7-card__excerpt text-sm md:text-base">
Testo aggiuntivo da configurazione
</p>
</div>
</article>
<article class="n7-card p-4
is-card-fullclickable transition hover:shadow-lg group">
<div class="grid gap-2.5 md:gap-4">
<div class="n7-card__heading flex flex-col-reverse gap-2.5 md:gap-4">
<h3 class="n7-card__title text-xl md:text-2xl font-bold">
<a class="hover:underline group-hover:underline" href="">
Manuale Anagrafe delle Aziende Agricole
<span class="flex gap-0.5 items-center pt-1 md:pt-2 text-sm md:text-base font-medium n7-content-03">
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#outline--document-text" />
</svg>
<span class="sr-only">, </span>PDF - 120Kb
</span>
</a>
</h3>
</div>
<p class="n7-card__excerpt text-sm md:text-base">
Testo aggiuntivo da configurazione
</p>
</div>
</article>
<article class="n7-card p-4
is-card-fullclickable transition hover:shadow-lg group">
<div class="grid gap-2.5 md:gap-4">
<div class="n7-card__heading flex flex-col-reverse gap-2.5 md:gap-4">
<h3 class="n7-card__title text-xl md:text-2xl font-bold">
<a class="hover:underline group-hover:underline" href="">
Link pagina Anagrafe delle Aziende Agricole
</a>
</h3>
</div>
<p class="n7-card__excerpt text-sm md:text-base">
Testo aggiuntivo da configurazione
</p>
</div>
</article>
<article class="n7-card p-4
is-card-fullclickable transition hover:shadow-lg group">
<div class="grid gap-2.5 md:gap-4">
<div class="n7-card__heading flex flex-col-reverse gap-2.5 md:gap-4">
<h3 class="n7-card__title text-xl md:text-2xl font-bold">
<a class="hover:underline group-hover:underline" href="">
Link pagina Anagrafe delle Aziende Agricole
</a>
</h3>
</div>
<p class="n7-card__excerpt text-sm md:text-base">
Testo aggiuntivo da configurazione
</p>
</div>
</article>
<article class="n7-card p-4
is-card-fullclickable transition hover:shadow-lg group">
<div class="grid gap-2.5 md:gap-4">
<div class="n7-card__heading flex flex-col-reverse gap-2.5 md:gap-4">
<h3 class="n7-card__title text-xl md:text-2xl font-bold">
<a class="hover:underline group-hover:underline" href="">
Link pagina Anagrafe delle Aziende Agricole
</a>
</h3>
</div>
<p class="n7-card__excerpt text-sm md:text-base">
Testo aggiuntivo da configurazione
</p>
</div>
</article>
</div>
</div>
</section>
<section class="py-8 md:py-20 n7-background-gray-02">
<div class="xl:container px-8 mx-auto">
<div class="gap-2 pb-8 md:pb-12">
<h2 class="text-3xl md:text-4xl">{{ title }}</h2>
</div>
<div class="grid gap-6 md:grid-cols-3">
{% for i in range(0,3) %}
{% render '@card--allegato',{ heading: 'Manuale Anagrafe delle Aziende Agricole' }, true %}
{% endfor %}
{% for i in range(0,3) %}
{% render '@card--base',{ heading: 'Link pagina Anagrafe delle Aziende Agricole' }, true %}
{% endfor %}
</div>
{% if hasShowMore %}
<div tabindex="-1" class="pt-6 grid transition transition-all hidden is-expandable" aria-label="{{ title }} - altro">
<div class=" grid gap-6 md:grid-cols-3">
{% for i in range(0,6) %}
{% render '@card--allegato',{ heading: 'Manuale Anagrafe delle Aziende Agricole' }, true %}
{% endfor %}
</div>
</div>
<div class="flex justify-center pt-8 is-show-more-wrapper">
<button class="n7-btn n7-btn--outline n7-btn-show-more is-show-more" aria-expanded="false">
<span class="is-more" aria-label="{{ title }} - Vedi altri">
Vedi altri {% render '@icon', { id: 'mini--chevron-right', size: 'w-5 h-5'}, true %}
</span>
{# <span class="is-less hidden" aria-label="{{ title }} - Mostra meno">
Mostra meno
</span> #}
</button>
</div>
{% endif %}
</div>
</section>
{
"title": "Titolo sezione",
"variants": [
{
"name": "default"
},
{
"name": "has-show-more",
"context": {
"hasShowMore": true
}
}
]
}
document.addEventListener('DOMContentLoaded', function () {
'use strict';
function ariaExpandedAndClassToggle(target, toggleClass1, toggleClass2) {
if (target.classList.contains(toggleClass1)) {
target.classList.remove(toggleClass1);
target.classList.add(toggleClass2);
target.setAttribute('aria-expanded', 'true');
} else if (target.classList.contains(toggleClass2)) {
target.classList.remove(toggleClass2);
target.classList.add(toggleClass1);
target.setAttribute('aria-expanded', 'false');
}
}
if(document.querySelector('.is-expandable')) {
var expandableText = document.querySelector('.is-expandable').textContent;
var stringResult = expandableText.length;
var showMoreButtons = document.querySelectorAll('.n7-btn-show-more');
showMoreButtons.forEach(function (button) {
button.addEventListener('click', function (event) {
console.log(event.target);
var expandableContainer = this.closest('.is-show-more-wrapper').previousElementSibling;
ariaExpandedAndClassToggle(this, 'is-show-more', 'is-show-less');
if (expandableContainer.nextElementSibling.querySelector('.n7-btn').classList.contains('is-show-less')) {
expandableContainer.classList.remove('hidden');
expandableContainer.setAttribute('tabindex', '0');
if (expandableContainer.getAttribute('tabindex')) {
expandableContainer.focus();
}
} else if (expandableContainer.nextElementSibling.querySelector('.n7-btn').classList.contains('is-show-more')) {
expandableContainer.classList.add('hidden');
expandableContainer.setAttribute('tabindex', '-1');
}
});
});
}
});
No notes defined.