<section class="n7-hero n7-hero--fullimg min-h-[--min-height] h-[--height] max-h-[--max-height] md:min-h-[--md-min-height] md:h-[--md-height] md:max-h-[--md-max-height] lg:min-h-[--lg-min-height] lg:h-[--lg-height] lg:max-h-[--lg-max-height] grid overflow-hidden relative bg-cover bg-center" style="background-image: url('/images/hero-background.jpg');">
<div class="overlay bg-black/10 row-span-full col-span-full"></div>
<div class="n7-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-5xl md:text-6xl font-regular mb-4 text-shadow">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean augue dui, aliquam non tortor id
</h1>
<p class="text-md md:text-xl text-shadow">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean augue dui, aliquam non tortor id, malesuada gravida purus. Duis congue molestie dui, id dictum dolor fermentum ut. Quisque blandit risus turpis, vitae posuere dolor convallis id. Vestibulum consectetur risus quis tempor pretium.
</p>
<!-- HERO ACTIONS -->
<div class="n7-hero__actions">
<a href="#" class="n7-btn
n7-btn--primary
">
Read more
</a>
</div>
<!-- /END HERO ACTIONS -->
</div>
</section>
<section class="n7-hero n7-hero--fullimg min-h-[--min-height] h-[--height] max-h-[--max-height] md:min-h-[--md-min-height] md:h-[--md-height] md:max-h-[--md-max-height] lg:min-h-[--lg-min-height] lg:h-[--lg-height] lg:max-h-[--lg-max-height] grid overflow-hidden relative bg-cover bg-center" style="background-image: url('/images/hero-background.jpg');">
<div class="overlay bg-black/10 row-span-full col-span-full"></div>
<div class="n7-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-5xl md: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"> #}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean augue dui, aliquam non tortor id
{# </span> #}
</h1>
<p class="text-md md:text-xl text-shadow">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean augue dui, aliquam non tortor id, malesuada gravida purus. Duis congue molestie dui, id dictum dolor fermentum ut. Quisque blandit risus turpis, vitae posuere dolor convallis id. Vestibulum consectetur risus quis tempor pretium.
</p>
<!-- HERO ACTIONS -->
<div class="n7-hero__actions">
{% render '@button',{ href:'#', label:'Read more'}, true %}
</div>
<!-- /END HERO ACTIONS -->
</div>
{# IMAGE NOT BG - TO DO VARIANT?
<picture class="w-full h-full absolute t-0 r-0 b-0 l-0">
<source srcset="" media="(max-width: 767px)">
<source srcset="" media="(min-width: 768px) and (max-width: 1023px)">
<img class="object-cover object-center w-full h-full" src="" alt="" />
</picture> #}
</section>
{
"title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus",
"category": "Category",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus",
"imgRight": true,
"imgPath": "/images/feathers.jpg",
"ctaLabel": "Scopri di più<span class=\"sr-only\"> su ** TITOLO BANNER **</span>"
}
/**
* HERO
*
*/
@layer components {
/* HERO FULLIMG */
.n7-hero--fullimg {
--min-height: 36rem;
--height: 55.8vw;
--max-height: 45rem;
--md-min-height: 24rem;
--md-height: 60vw;
--md-max-height: 45rem;
--lg-min-height: 39rem;
--lg-height: 42.68vw;
--lg-max-height: 45rem;
}
}
Hero component configuration
Configurations:
Blocks: