Headers

Headers and beginnings content.

5 Sections

Introduction

Types

Default header

Default header comes in white and transparent styles containing logo, navigation bar, and login/register options.

Code



                                        

Types

Weights

Default

  1. Whitespace of top margin 35px.
  2. Whitespace between logo and first navigation is 40px.
  3. Whitespace between navigation elements is 50px.
  4. Whitespace between buttons and the last navigation item is 120px.
  5. Whitespace between the two buttons is 14px.
  6. Font size is 18px.
  7. Active object navigator 3px & 50px.

 

Header with navigation

  1. Bottom margins 40px.
  2. Top margins for breadcrumb menu 26px.
  3. Bottom margins for breadcrumb menu 26px.
  4. Whitespace between navigation item and arrow icon 23px.
  5. Whitespace between arrow icon and second item in hierarchy is 9px.
  6. Font size of breadcrumb element is 16px.

 

 

Scrollable header

  1. Whitespace between icon and text is 15px.
  2. Dimensions of navigation item is 120px.
  3. Whitespace between text field and button is 33px.

Side navigation

  1. Whitespace of active item in navigation 10px in both sides.
  2. Hight and width of the navigation item in the block 98px & 120px.

Slide menu

  1. Whitespace of content  blocks 16px
  2. Whitespace 40px
  3. Whitespaces in text blocks 18px
  4. Whitespace between each item block 20px
  5. Whitespace between item list and call to action button 40px

Interactions

Hover and click

In default headers and header with navigation types, the user is able to hover over certain navigation element then it can be selected.

Scrolling and click

Scrolling effect over the elements is triggered mimicking the user’s interaction of sliding from both left and right directions.

Status

Guest

The user is recognized as a guest once he visits the website. Two buttons which are log-in and register buttons are placed on the left side of the navigation encouraging the user to create or login to his account on the system.

Logged in

When the user logs in, the left side of the header transitions to a profile icon and notifications.