Net7 UI Kit

Main heading component: Without Nav 

<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%]gap-4 md:gap-10">
            <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>

        <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>
 
{% extends '@main-heading' %}
{% block siteBranding %}
    {{ super() }}
{% endblock siteBranding %}

{% block primaryNav %}
{% endblock primaryNav %}

{% block rightArea %}
    {% render '@logo--main', { href: '#', path: logoPath, size: logoSize, objectFit: logoObjectFit, classes: logoClasses, width: logoWidth, height: logoHeight}, true %}
    {% block headingActions %}
    {% endblock headingActions %}
{% endblock rightArea %}
 
{
  "logoSize": "auto",
  "logoObjectFit": "object-cover md:object-contain",
  "verticalDividerWidth": "w-4 h-10 md:w-10 md:h-20",
  "logoDivider": false,
  "secondLogo": false,
  "secondLogoSize": "w-auto",
  "secondLogoObjectFit": "object-contain"
}

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