Net7 design system

Hero: Fullimg 

<section class="n7-hero grid relative bg-cover bg-center bg-no-repeat min-h-[25rem] h-full md:min-h-[33rem] lg:h-[85vh] md:max-h-[66rem] lg:max-h-[45rem]" style="background-image: url('/images/hero-background.jpg');">
    <div class="overlay bg-black/10 row-span-full col-span-full"></div>
    <div class="xl:container grid gap-6 lg:gap-10 items-center content-center px-8 py-12 n7-content-inverse row-span-full col-span-full lg:pr-[25%] xl:pr-[33%]">
        <h1 class="text-4xl md:text-5xl xl:text-6xl font-regular mb-4 text-shadow">
            <span class="block pb-12 md:pb-8 w-full max-w-[412px]"><img src="/images/logo-artea-transparent.svg" width="412" height="94"><span class="sr-only">artea</span></span>
            <span class="block">Agenzia Regionale Toscana per le Erogazioni in Agricoltura</span>
        </h1>
        <p class="text-base md:text-md xl:text-xl text-shadow">
            Dal 1999 eroga gli aiuti, i premi e i contributi previsti all’insieme degli operatori del settore agricolo, grazie ai Fondi europei FEAGA (Fondo Europeo Agricolo di Garanzia) e FEASR (Fondo Europeo Agricolo per lo Sviluppo Rurale).
        </p>
        <!-- HERO ACTIONS -->
        <div class="n7-hero__actions">

            <a href="#" class="n7-btn 
    n7-btn--outline bg-white border-0">
                Scopri gli aiuti

                <svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2 transition-all duration-200 ease-out transform group-hover:translate-x-1" aria-hidden="true" focusable="false" role="img">
                    <use xlink:href="../../icons.svg#mini--chevron-right" />
                </svg>

            </a>

        </div>
        <!-- /END HERO ACTIONS -->
    </div>
</section>
 
<section class="n7-hero grid relative bg-cover bg-center bg-no-repeat min-h-[25rem] h-full md:min-h-[33rem] lg:h-[85vh] md:max-h-[66rem] lg:max-h-[45rem]" style="background-image: url('/images/hero-background.jpg');">
    <div class="overlay bg-black/10 row-span-full col-span-full"></div>
    <div class="xl:container grid gap-6 lg:gap-10 items-center content-center px-8 py-12 n7-content-inverse row-span-full col-span-full lg:pr-[25%] xl:pr-[33%]">
        <h1 class="text-4xl md:text-5xl xl:text-6xl font-regular mb-4 text-shadow">
            <span class="block pb-12 md:pb-8 w-full max-w-[412px]"><img src="/images/logo-artea-transparent.svg" width="412" height="94"><span class="sr-only">artea</span></span>
            <span class="block">Agenzia Regionale Toscana per le Erogazioni in Agricoltura</span>
        </h1>
        <p class="text-base md:text-md xl:text-xl text-shadow">
            Dal 1999 eroga gli aiuti, i premi e i contributi previsti all’insieme degli operatori del settore agricolo, grazie ai Fondi europei FEAGA (Fondo Europeo Agricolo di Garanzia) e FEASR (Fondo Europeo Agricolo per lo Sviluppo Rurale).
        </p>
        <!-- HERO ACTIONS -->
        <div class="n7-hero__actions">
            {% render '@button--outline',{ href:'#', label:'Scopri gli aiuti', classes: 'bg-white border-0'}, true %}
        </div>
        <!-- /END HERO ACTIONS -->
    </div>
</section>
 
{
  "class": "bg-pink-200",
  "bodyClass": "text-pink-500",
  "title": "A tool to <span class=\"text-pink-600\">empower your components</span> library.",
  "body": "Lorem ipsum dolor sit amet consectetur adipisicing elit. In, qui, possimus natus autem a minus quaerat voluptate laboriosam, aut harum esse deserunt.",
  "buttons": {
    "primary": {
      "href": "#",
      "label": "Get started",
      "class": "block w-full"
    },
    "secondary": {
      "href": "#",
      "label": "Learn more",
      "class": "block w-full"
    }
  },
  "component": {
    "handle": "image",
    "context": {
      "src": "/images/bubbles.jpg",
      "class": "w-full h-64 md:h-full md:w-auto object-cover"
    }
  }
}

No notes defined.