responsive mode

Standard Header

Our header is an organism made up of the Zuto logo and main links.

copy code code example

Closed Header

A header for the application form/places where we don't want the links.

Call us01625 619 944 AutoTrader logo our preferred partner
copy code code example 

    

      
      

        
          

              
          

          Call us01625 619 944
        

        AutoTrader logo our preferred partner

Closed Header - outside opening hours

A header for the application form/places where we don't want the links and the office is closed.

Contact AutoTrader logo our preferred partner
copy code code example 

    

      
      

        Contact
        AutoTrader logo our preferred partner

Signed-in Header

A header for the places where a customer is signed in and their application has been approved in principle. The central tabs, when viewed via medium and large viewports, move below the logo and profile control (icon/customer name/down-arrow) when viewed via narrow viewports. The profile control displays the profile menu (see below) when clicked.

User Joseph Smith Dropdown
copy code code example 

  

    
    

      
        
          
            User
            
          
        
        Joseph Smith
        
          
            Dropdown

Profile Menu

This is positioned directly below the profile button (over the tabs and content area when viewport is narrow) when the user clicks on the profile control. The above code example includes source for the profile menu.

Contextual Header

A secondary navigation that offers 2x contextual links.

copy code code example