Net7 UI Kit

Banner: Image Left 

<section class="n7-banner bg-white py-20">
    <div class="n7-container md:flex md:items-center md:justify-between gap-6">

        <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 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>
</section>
 
<section class="n7-banner bg-white py-20{% block classes %}{% if classes %} {{ classes }}{% endif %}{% endblock classes %}">
    <div class="n7-container md:flex md:items-center md:justify-between gap-6">
        {% 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": false,
  "imgPath": "/images/feathers.jpg",
  "ctaLabel": "Scopri di più<span class=\"sr-only\"> su ** TITOLO BANNER **</span>",
  "imgLeft": true
}

Banner component configuration Configurations:

  • title: value
  • classes: value - when you need extra classes - for style overriding etc
  • 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