Net7 UI Kit

Main heading component: Has Actions 

<div class="n7-main-heading bg-white flex items-center px-4 py-3 lg:p-4 border-b n7-border-primary lg:border-b-0 md-max-w-480-min-h:fixed md-max-w-480-min-h:top-[--header-top-position] md-max-w-480-min-h:right-0 md-max-w-480-min-h:left-0 md-max-w-480-min-h:z-30">
    <div class="n7-main-heading__container n7-container mx-auto flex items-center flex-1">

        <div class="n7-site-branding n7-branding flex items-center site-branding lg:max-w-[35.7%]">
            <a class="n7-site-logo site-logo flex n7-logo--main auto" href="#">
                <img class="w-full h-full object-cover md:object-contain object-left-top" src="/images/logo.png" alt="Alt logo image" width="248" height="81" />
            </a>

        </div>

        <div class="n7-main-headings__center flex-1 lg:ml-auto lg:justify-end">
            <nav class="n7-primary-navigation flex lg:justify-end" aria-label="Principale" id="siteNavWrapper">
                <button type="button" class="n7-btn n7-btn--only-text rounded-0 lg:hidden ml-auto n7-btn--icon group" aria-expanded="false" aria-controls="mainNavPanel" id="mobileNavToggle">
                    <svg class="n7-icon inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 m-0 p-0 transition-all duration-200 ease-out transform group-hover:translate-none is-show-menu group-aria-expanded:hidden" aria-hidden="true" focusable="false" role="img">
                        <use href="../../icons.svg#mini--bars-3" />
                    </svg>

                    <svg class="n7-icon inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 m-0 p-0 transition-all duration-200 ease-out transform group-hover:translate-none is-close-menu hidden group-aria-expanded:inline-block" aria-hidden="true" focusable="false" role="img">
                        <use href="../../icons.svg#mini--x-mark" />
                    </svg>

                    <span class="sr-only is-show-menu">
                        Menu
                    </span>
                </button>
                <!-- Mobile panel -->
                <div class="n7-primary-navigation__panel flex-col bg-white transition-all invisible w-[88%] lg:w-auto fixed lg:static lg:visible top-[--header-height] bottom-0 left-[12%] lg:left-0 border-l n7-border-primary lg:border-l-0 overflow-y-auto lg:overflow-visible" id="mainNavPanel">
                    <!-- Main nav -->
                    <div class="n7-primary-navigation__module is-main lg:border-b-0">
                        <ul class="n7-primary-navigation__list grid lg:flex lg:justify-end  gap-4 xl:gap-8">

                            <li>
                                <a href="" class="n7-primary-navigation__link group w-full flex items-center p-3 gap-2 font-medium hover:underline focus:n7-content-primary text-sm lg:text-base">
                                    Item
                                </a>
                            </li>

                            <li>
                                <a href="" class="n7-primary-navigation__link group w-full flex items-center p-3 gap-2 font-medium hover:underline focus:n7-content-primary text-sm lg:text-base is-current" aria-current="page">
                                    Current page
                                </a>
                            </li>

                            <li class="n7-dropdown-menu has-dropdown-menu n7-primary-navigation__item">
                                <button class="n7-dropdown-menu__trigger n7-dropdown-trigger group w-full flex items-center  font-medium hover:underline focus:n7-content-primary  aria-expanded:n7-background-02 lg:aria-expanded:bg-white aria-expanded:n7-content-01 p-3 gap-2 text-sm lg:text-base" aria-expanded="false" aria-controls="submenumenu-01">

                                    Dropdown<svg class="n7-icon inline-block align-middle fill-current w-5 h-5 ml-auto transition-all n7-dropdown-menu__trigger-icon group-aria-expanded:-rotate-180" aria-hidden="true" focusable="false" role="img">
                                        <use href="../../icons.svg#mini--chevron-down" />
                                    </svg>
                                </button>
                                <ul class="n7-dropdown-menu__list hidden border border-t-0 n7-border-gray-01 lg:w-52  lg:border-t lg:absolute lg:rounded lg:shadow-md border-r-0 border-l-0 lg:border-r lg:border-l" id="submenumenu-01">

                                    <li class="n7-dropdown-menu__item group border-b n7-border-gray-01 last-of-type:border-b-0">
                                        <a class="block p-3 transition bg-white text-sm xl:text-base hover:underline hover:n7-background-02 focus:n7-background-02 group-first:rounded-t group-last:rounded-b" href="">
                                            <div class="flex gap-2 items-center">

                                                <span class="grow">Item 1</span>

                                            </div>

                                        </a>
                                    </li>

                                    <li class="n7-dropdown-menu__item group border-b n7-border-gray-01 last-of-type:border-b-0">
                                        <a class="block p-3 transition bg-white text-sm xl:text-base hover:underline hover:n7-background-02 focus:n7-background-02 group-first:rounded-t group-last:rounded-b" href="">
                                            <div class="flex gap-2 items-center">

                                                <span class="grow">Item 2</span>

                                            </div>

                                        </a>
                                    </li>

                                    <li class="n7-dropdown-menu__item group border-b n7-border-gray-01 last-of-type:border-b-0">
                                        <a class="block p-3 transition bg-white text-sm xl:text-base hover:underline hover:n7-background-02 focus:n7-background-02 group-first:rounded-t group-last:rounded-b" href="">
                                            <div class="flex gap-2 items-center">

                                                <span class="grow">Item 3</span>

                                            </div>

                                        </a>
                                    </li>

                                    <li class="n7-dropdown-menu__item group border-b n7-border-gray-01 last-of-type:border-b-0">
                                        <a class="block p-3 transition bg-white text-sm xl:text-base hover:underline hover:n7-background-02 focus:n7-background-02 group-first:rounded-t group-last:rounded-b" href="">
                                            <div class="flex gap-2 items-center">

                                                <span class="grow">Item 4</span>

                                            </div>

                                        </a>
                                    </li>

                                </ul>
                            </li>

                        </ul>
                    </div>

                    <!-- Mobile search in panel -->
                    <div class="n7-primary-navigation__module is-main lg:hidden is-last-element">
                        <form role="search" class="flex items-end p-3">
                            <div class="n7-input-field gap-1 flex-1 ">
                                <label for="inputSearchMobile" class="n7-input-field__label">
                                    Cerca servizi, informazioni, aiuti...

                                </label>

                                <div class="n7-input has-icon">

                                    <svg class="n7-icon inline-block align-middle fill-current n7-input__icon" aria-hidden="true" focusable="false" role="img">
                                        <use href="../../icons.svg#mini--magnifying-glass" />
                                    </svg>

                                    <input id="inputSearchMobile" class="rounded-l-lg rounded-r-none text-sm n7-input-placeholder" type="search" placeholder="Cerca">
                                </div>

                            </div>
                            <button type="button" class="n7-btn n7-btn--secondary n7-btn--icon w-12 h-12">
                                <span class="sr-only">Cerca</span>
                                <svg class="n7-icon inline-block align-middle fill-current w-5 h-5" aria-hidden="true" focusable="false" role="img">
                                    <use href="../../icons.svg#mini--magnifying-glass" />
                                </svg>

                            </button>
                        </form>
                    </div>

                </div>
                <div class="n7-primary-navigation__backdrop bg-black/25 top-[--header-height] lg:hidden"></div>
            </nav>
        </div>

        <div class="n7-main-heading__actions grid lg:flex gap-3 lg:ml-2 px-2 py-4 lg:p-4">

            <button type="button" class="n7-btn 
    n7-btn--primary
    n7-btn--primary">

                Azione 1

            </button>

            <a href="#" class="n7-btn 
    n7-btn--icon-right group/button n7-btn--outline">

                Bottone 2

                <svg class="n7-icon inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 transition-all duration-200 ease-out transform group-hover/button:translate-x-1" aria-hidden="true" focusable="false" role="img">
                    <use href="../../icons.svg#outline--arrow-right-start-on-rectangle" />
                </svg>

            </a>

        </div>

    </div>
</div>
 
{% extends '@main-heading' %}


{% block rightArea %}
    {% block headingActions %}
        <div class="n7-main-heading__actions grid lg:flex gap-3 lg:ml-2 px-2 py-4 lg:p-4">
            {% for button in buttons %}
                {% if button.type == "button-left-icon" %}
                    {% render "@button--icon-left", button, true %}
                {% elseif button.type == "button-right-icon" %}
                    {% render "@button--icon-right", button, true %}
                {% elseif button.type == "button--icon" %}
                    {% render "@button--only-icon", button, true %}
                {% elseif button.type == "button" %}
                    {% render "@button", button, true %}
                {% endif %}
            {% endfor %}
            {% if userAccess %}
                {% render '@user-access', {isUserLoggedIn: false }, true %}
            {% endif %}
        </div>
    {% endblock headingActions %}
{% endblock rightArea %}
 
{
  "logoSize": "auto",
  "logoObjectFit": "object-cover md:object-contain",
  "verticalDividerWidth": "w-4 h-10 md:w-10 md:h-20",
  "logoDivider": true,
  "secondLogo": true,
  "secondLogoSize": "w-auto",
  "secondLogoObjectFit": "object-contain",
  "userAccess": true,
  "buttons": [
    {
      "label": "Azione 1",
      "type": "button",
      "classes": "n7-btn--primary"
    }
  ]
}

Main heading component

Configurations (for development):

Includes components:

  • logo (one or more)
  • primary navigation

Context variables (for development):

  • classes: value - when you need extra classes - for style overriding etc
  • userAccess: true - include user access component
  • logoDivider: true - include vertical divider between logos
  • verticalDividerWidth: string - width of the vertical divider
  • logoPath: string - path to the logo
  • logoSize: string - size of the logo
  • logoObjectFit: string - object-fit of the logo
  • secondLogo: true - include second logo
  • secondLogoPath: string - path to the second logo
  • secondLogoSize: string - size of the second logo
  • secondLogoObjectFit: string - object-fit of the second logo
  • buttons: array of buttons - include buttons in the actions area
    • type: “button-left-icon” - include button with left icon
    • type: “button-right-icon” - include button with right icon
    • type: “button–icon” - include button with only icon
    • type: “button” - include simple button

Blocks:

  • siteBranding
  • primaryNav
  • rightArea
    • headingActions
  • classes: for class overridings in variant templates, if needed