Net7 UI Kit

Hero: Image Right 

<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>",
  "imgLeft": false
}
  • Content: 
    /**
 * 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;
    }
}
  • URL: /components/raw/hero/hero.css
  • Filesystem Path: components/04-organisms/hero/hero.css
  • Size: 363 Bytes

Hero component configuration

Configurations:

  • classes: value - when you need extra classes - for style overriding etc
  • title: value
  • category: value
  • description: value
  • imgPath: value - path to image
  • imgAlt: value - image alt if needed
  • ctaLabel: value - cta value
  • imgRight: true - for right-side image
  • imgLeft: true - for left-side image

Blocks:

  • classes: for class overridings in variant templates, if needed