Net7 UI Kit

Logos area 

<div class="n7-logos-area">
    <div class="container p-6 space-y-6">

        <h2 class="n7-content-02 text-base md:text-lg font-bold">Titolo sezione footer</h2>

        <div class="grid md:flex gap-4 md:items-center">

            <div class="flex flex-wrap gap-4">

                <a class="n7-site-logo site-logo flex" href="#">
                    <img class="w-full h-full object-contain object-left-top" src="/images/logo.png" alt="Img alt" width="247" height="80" />
                </a>

                <a class="n7-site-logo site-logo flex" href="#">
                    <img class="w-full h-full object-contain object-left-top" src="/images/logo.png" alt="Img alt" width="247" height="80" />
                </a>

            </div>
        </div>
    </div>
</div>
 
<div class="n7-logos-area{% block classes %}{% if classes %} {{ classes }}{% endif %}{% endblock classes %}">
    <div class="container p-6{% if heading %} space-y-6{% endif %}">
    {% if heading %}
     <h2 class="n7-content-02 text-base md:text-lg font-bold">{{ heading }}</h2>
    {% endif %}
    <div class="grid md:flex gap-4 md:items-center">
        {% if mainLogo == 'true' %}
        <div class="md:mr-auto">
            <!-- Logo -->
            {% render '@logo', { href:'#', width: '247', height: '80', alt: 'Img alt', size:''}, true %}
        </div>
        {% endif %}
        <div class="flex flex-wrap gap-4">
            {% for logo in logos %}
            {% render '@logo', { href: logo.href, width: logo.width, height: logo.height, alt: logo.alt, size: logo.size, path: logo.path, srcset: logo.srcset}, true %}
            {% endfor %}
        </div>
    </div>
</div>
</div>
 
{
  "mainLogo": true,
  "heading": "Titolo sezione footer",
  "logos": [
    {
      "href": "#",
      "width": 247,
      "height": 80,
      "alt": "Img alt",
      "size": ""
    },
    {
      "href": "#",
      "width": 247,
      "height": 80,
      "alt": "Img alt",
      "size": ""
    }
  ]
}

#Footer logos area

Configurations:

  • classes: value - when you need extra classes - for style overriding etc

  • heading: value - if a section heading is needed

  • mainLogo: true - if has a main logo on the left distincted from logo list

  • logos: array of objects - each object has the following properties:

    • href: string - the url of the logo
    • width: number - the width of the logo
    • height: number - the height of the logo
    • alt: string - the alt text of the logo
    • size: string - the size of the logo
    • srcset: string - the srcset of the logo for responsive variants

    Blocks:

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