Net7 design system

Sezione Come Fare Per 

<section class="py-8 md:py-12 xl:px-16">
    <div class="n7-container">
        <div class="gap-2 pb-8">
            <h2 class="text-3xl md:text-4xl">Come fare per</h2>
        </div>

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

                <div class="w-24 h-24 p-6 rounded-full  bg-brand-lighter">
                    <svg class="inline-block align-middle fill-current w-12 h-12" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#outline--information-circle" />
                    </svg>

                </div>

                <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-lg md:text-xl font-bold">
                            <a class="hover:underline group-hover:underline" href="">
                                Presentare una domanda di aiuto

                                <span class="sr-only">: Read more</span>
                            </a>
                        </h3>

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

                            <div class="n7-card__categories">
                                <span class="n7-category n7-content-placeholder">
                                    Categoria
                                </span>
                            </div>

                        </div>

                    </div>

                    <a href="" tabindex="-1" aria-hidden="true" class="n7-link ">Read more
                        <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--arrow-up-right" />
                        </svg>

                    </a>

                </div>
            </article>

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

                <div class="w-24 h-24 p-6 rounded-full  bg-brand-lighter">
                    <svg class="inline-block align-middle fill-current w-12 h-12" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#outline--document-magnifying-glass" />
                    </svg>

                </div>

                <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-lg md:text-xl font-bold">
                            <a class="hover:underline group-hover:underline" href="">
                                Verificare lo stato della pratica

                                <span class="sr-only">: Read more</span>
                            </a>
                        </h3>

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

                            <div class="n7-card__categories">
                                <span class="n7-category n7-content-placeholder">
                                    Categoria
                                </span>
                            </div>

                        </div>

                    </div>

                    <a href="" tabindex="-1" aria-hidden="true" class="n7-link ">Read more
                        <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--arrow-up-right" />
                        </svg>

                    </a>

                </div>
            </article>

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

                <div class="w-24 h-24 p-6 rounded-full  bg-brand-lighter">
                    <svg class="inline-block align-middle fill-current w-12 h-12" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#outline--wallet" />
                    </svg>

                </div>

                <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-lg md:text-xl font-bold">
                            <a class="hover:underline group-hover:underline" href="">
                                Conoscere l’iter del pagamento

                                <span class="sr-only">: Read more</span>
                            </a>
                        </h3>

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

                            <div class="n7-card__categories">
                                <span class="n7-category n7-content-placeholder">
                                    Categoria
                                </span>
                            </div>

                        </div>

                    </div>

                    <a href="" tabindex="-1" aria-hidden="true" class="n7-link ">Read more
                        <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--arrow-up-right" />
                        </svg>

                    </a>

                </div>
            </article>

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

                <div class="w-24 h-24 p-6 rounded-full  bg-brand-lighter">
                    <svg class="inline-block align-middle fill-current w-12 h-12" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#outline--document-text" />
                    </svg>

                </div>

                <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-lg md:text-xl font-bold">
                            <a class="hover:underline group-hover:underline" href="">
                                Accedere alla documentazione e modulistica

                                <span class="sr-only">: Read more</span>
                            </a>
                        </h3>

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

                            <div class="n7-card__categories">
                                <span class="n7-category n7-content-placeholder">
                                    Categoria
                                </span>
                            </div>

                        </div>

                    </div>

                    <a href="" tabindex="-1" aria-hidden="true" class="n7-link ">Read more
                        <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--arrow-up-right" />
                        </svg>

                    </a>

                </div>
            </article>

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

                <div class="w-24 h-24 p-6 rounded-full  bg-brand-lighter">
                    <svg class="inline-block align-middle fill-current w-12 h-12" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#outline--folder-open" />
                    </svg>

                </div>

                <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-lg md:text-xl font-bold">
                            <a class="hover:underline group-hover:underline" href="">
                                Accedere alle banche dati

                                <span class="sr-only">: Read more</span>
                            </a>
                        </h3>

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

                            <div class="n7-card__categories">
                                <span class="n7-category n7-content-placeholder">
                                    Categoria
                                </span>
                            </div>

                        </div>

                    </div>

                    <a href="" tabindex="-1" aria-hidden="true" class="n7-link ">Read more
                        <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--arrow-up-right" />
                        </svg>

                    </a>

                </div>
            </article>

        </div>

    </div>
</section>
 
<section class="py-8 md:py-12 xl:px-16">
    <div class="n7-container">
        <div class="gap-2 pb-8">
            <h2 class="text-3xl md:text-4xl">Come fare per</h2>
        </div>

        <div class="grid gap-6 md:grid-cols-3 lg:grid-cols-5 md:py-6">
            {% render '@card--guida',{ icon:'outline--information-circle', heading: 'Presentare una domanda di aiuto', ctaIcon:'mini--arrow-up-right'}, true %}
            {% render '@card--guida',{ icon:'outline--document-magnifying-glass', heading: 'Verificare lo stato della pratica', ctaIcon:'mini--arrow-up-right'}, true %}
            {% render '@card--guida',{ icon:'outline--wallet', heading: 'Conoscere l’iter del pagamento', ctaIcon:'mini--arrow-up-right'}, true %}
            {% render '@card--guida',{ icon:'outline--document-text', heading: 'Accedere alla documentazione e modulistica', ctaIcon:'mini--arrow-up-right'}, true %}
            {% render '@card--guida',{ icon:'outline--folder-open', heading: 'Accedere alle banche dati', ctaIcon:'mini--arrow-up-right'}, true %}
        </div>

    </div>
</section>
 
/* No context defined. */

No notes defined.