<section class="n7-hero bg-white py-20">
<div class="n7-container space-y-6 md:space-y-0 md:flex md:items-center md:justify-between md:gap-8">
<div class="grid gap-4 md:gap-6 md:w-1/2">
<div class="flex flex-col-reverse gap-2">
<h2 class="text-2xl md:text-4xl font-bold">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus
</h2>
<small class="text-sm uppercase text-gray-600 font-semibold tracking-wide">Category</small>
</div>
<p class="text-gray-700 mb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus
</p>
<div>
<a href="#" class="n7-btn
n7-btn--primary
">
Scopri di più<span class="sr-only"> su ** TITOLO BANNER **</span>
</a>
</div>
</div>
<div class="md:w-1/2 mt-4 md:mt-0 flex align-center justify-center">
<img src="../../images/feathers.jpg" alt="" class="w-full h-auto">
</div>
</div>
</section>
<section class="n7-hero bg-white py-20{% block classes %}{% if classes %} {{ classes }}{% endif %}{% endblock classes %}">
<div class="n7-container space-y-6 md:space-y-0 md:flex md:items-center md:justify-between md:gap-8">
{% if imgLeft %}
<div class="md:w-1/2 mt-4 md:mt-0 flex align-center justify-center">
<img src="{{ imgPath | path }}" alt="{{ imgAlt }}" class="w-full h-auto">
</div>
{% endif %}
<div class="grid gap-4 md:gap-6 md:w-1/2">
<div class="flex flex-col-reverse gap-2">
<h2 class="text-2xl md:text-4xl font-bold">
{{ title }}
</h2>
<small class="text-sm uppercase text-gray-600 font-semibold tracking-wide">{{ category }}</small>
</div>
{% if description %}
<p class="text-gray-700 mb-4">
{{ description }}
</p>
{% endif %}
<div>
{% render '@button',{href:'#',label: ctaLabel}, true %}
</div>
</div>
{% if imgRight %}
<div class="md:w-1/2 mt-4 md:mt-0 flex align-center justify-center">
<img src="{{ imgPath | path }}" alt="{{ imgAlt }}" class="w-full h-auto">
</div>
{% endif %}
</div>
</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: