Sezione Avvisi

<section class="py-8 md:py-12 xl:px-16">
    <div class="n7-container">
        <div class="flex items-center gap-2 pb-8">
            <h2 class="text-3xl md:text-4xl">Avvisi</h2>
            <span class="w-4 h-8 md:w-6 md:h-12 bg-no-repeat bg-left-top bg-cover" style="background-image: url('/images/vertical-divider.svg')"></span>
            <a href="" class="n7-link ">Consulta tutti gli avvisi
                <svg class="inline-block align-middle fill-current w-1e h-1e ml-2" aria-hidden="true" focusable="false" role="img">
                    <use xlink:href="../../icons.svg#mini--chevron-right" />
                </svg>

            </a>
        </div>

        <div class="grid gap-6 md:grid-cols-2 xl:grid-cols-6 n7-grid--2-3">
            <article class="n7-card
  
   is-card-fullclickable transition hover:shadow-lg group">

                <div class="grid gap-4">
                    <div class="n7-card__heading flex flex-col-reverse gap-4">
                        <h3 class="n7-card__title text-xl md:text-2xl">
                            <a class="hover:underline group-hover:underline" href="">
                                Componente card esempio

                            </a>
                        </h3>

                        <div class="flex items-baseline justify-between">

                            <div class="n7-card__date text-sm">
                                <time datetime="2023-09-30">30.09.2023</time>
                            </div>

                        </div>

                    </div>

                    <ul class="flex gap-2 flex-wrap mt-auto" aria-label="Categorie">

                        <li><span class="n7-chip  n7-chip--sm">Label</span></li>

                        <li><span class="n7-chip  n7-chip--sm">Label</span></li>

                        <li><span class="n7-chip  n7-chip--sm">Label</span></li>

                        <li><span class="n7-chip  n7-chip--sm">Label</span></li>

                    </ul>

                </div>
            </article>

            <article class="n7-card
  
   is-card-fullclickable transition hover:shadow-lg group">

                <div class="grid gap-4">
                    <div class="n7-card__heading flex flex-col-reverse gap-4">
                        <h3 class="n7-card__title text-xl md:text-2xl">
                            <a class="hover:underline group-hover:underline" href="">
                                Componente card esempio

                            </a>
                        </h3>

                        <div class="flex items-baseline justify-between">

                            <div class="n7-card__date text-sm">
                                <time datetime="2023-09-30">30.09.2023</time>
                            </div>

                        </div>

                    </div>

                    <ul class="flex gap-2 flex-wrap mt-auto" aria-label="Categorie">

                        <li><span class="n7-chip  n7-chip--sm">Label</span></li>

                        <li><span class="n7-chip  n7-chip--sm">Label</span></li>

                        <li><span class="n7-chip  n7-chip--sm">Label</span></li>

                        <li><span class="n7-chip  n7-chip--sm">Label</span></li>

                    </ul>

                </div>
            </article>

            <article class="n7-card
  
   is-card-fullclickable transition hover:shadow-lg group">

                <div class="grid gap-4">
                    <div class="n7-card__heading flex flex-col-reverse gap-4">
                        <h3 class="n7-card__title text-xl md:text-2xl">
                            <a class="hover:underline group-hover:underline" href="">
                                Componente card esempio

                            </a>
                        </h3>

                        <div class="flex items-baseline justify-between">

                            <div class="n7-card__date text-sm">
                                <time datetime="2023-09-30">30.09.2023</time>
                            </div>

                        </div>

                    </div>

                    <ul class="flex gap-2 flex-wrap mt-auto" aria-label="Categorie">

                        <li><span class="n7-chip  n7-chip--sm">Label</span></li>

                        <li><span class="n7-chip  n7-chip--sm">Label</span></li>

                        <li><span class="n7-chip  n7-chip--sm">Label</span></li>

                        <li><span class="n7-chip  n7-chip--sm">Label</span></li>

                    </ul>

                </div>
            </article>

            <article class="n7-card
  
   is-card-fullclickable transition hover:shadow-lg group">

                <div class="grid gap-4">
                    <div class="n7-card__heading flex flex-col-reverse gap-4">
                        <h3 class="n7-card__title text-xl md:text-2xl">
                            <a class="hover:underline group-hover:underline" href="">
                                Componente card esempio

                            </a>
                        </h3>

                        <div class="flex items-baseline justify-between">

                            <div class="n7-card__date text-sm">
                                <time datetime="2023-09-30">30.09.2023</time>
                            </div>

                        </div>

                    </div>

                    <ul class="flex gap-2 flex-wrap mt-auto" aria-label="Categorie">

                        <li><span class="n7-chip  n7-chip--sm">Label</span></li>

                        <li><span class="n7-chip  n7-chip--sm">Label</span></li>

                        <li><span class="n7-chip  n7-chip--sm">Label</span></li>

                        <li><span class="n7-chip  n7-chip--sm">Label</span></li>

                    </ul>

                </div>
            </article>

            <article class="n7-card
  
   is-card-fullclickable transition hover:shadow-lg group">

                <div class="grid gap-4">
                    <div class="n7-card__heading flex flex-col-reverse gap-4">
                        <h3 class="n7-card__title text-xl md:text-2xl">
                            <a class="hover:underline group-hover:underline" href="">
                                Componente card esempio

                            </a>
                        </h3>

                        <div class="flex items-baseline justify-between">

                            <div class="n7-card__date text-sm">
                                <time datetime="2023-09-30">30.09.2023</time>
                            </div>

                        </div>

                    </div>

                    <ul class="flex gap-2 flex-wrap mt-auto" aria-label="Categorie">

                        <li><span class="n7-chip  n7-chip--sm">Label</span></li>

                        <li><span class="n7-chip  n7-chip--sm">Label</span></li>

                        <li><span class="n7-chip  n7-chip--sm">Label</span></li>

                        <li><span class="n7-chip  n7-chip--sm">Label</span></li>

                    </ul>

                </div>
            </article>

        </div>

    </div>
</section>