The application header appears at the top of all screens on Web platform and allows users to navigate to main areas of the website. It also provides easy access to the more general account and support related links.
The application header consists of 3 key sections:
- FanDuel Logo
- Primary navigation
- Secondary navigation
The application header is
100% width of the viewport,
66px tall, and attached to the top of the viewport.
User avatars are shown if there is one available but if not a default user icon will be visible. If the user is considered a highly experienced player the relevant HEP icon will be shown in the top-right position of their avatar.
By means of priority, 1 being the highest and 5 being the lowest, as the viewport increases we see elements come in as the space allows.
|1||FanDuel Logo Shield|
|1||Hamburger & primary navigation|
|3||RP (Responsible Play)|
|4||Refer friends, Earn cash|
|5||FanDuel Logo full|
Hamburger menu as primary navigation, FanDuel Shield centred and Account icon
Shield logo is shown on left with primary navigation displayed in full. A condensed version of the secondary navigation appears on the right.
Refer friends and users account balance appears on the right within secondary navigation
FanDuel shield switches to full logo.
Small viewport contains a Responsible Play link in the active dropdown menu and flips the Hamburger menu to become an ‘X’ when active and then back again when innactive. Large viewport uses the tabs component: Tabs.
Small viewport combines the Account and Help menu’s into one dropdown under the Account trigger. The Account/HEP icon flips to an ‘X’ when active and then back again when innactive.
|Small viewport||Large viewport|
|Log in button||Responsible Play links to Responsible Play page|
|Join button||Help links to Support|
|Log in button|