For detailed instructions, view our install section in this documentation. Make sure all of the dependencies and polyfills are loaded to make the component cross-browser compatible.
Important note Wrap your header in a
divwith 100% width.
Important note Add a background color style to the wrapper div to acheive a background color.
To add a header, add the markup up at the top of the document above the
<main id="main"> element.
Important note The header component is not connected to any pearson authentication services.
You will need to build a script for users to authenticate through console. This does not come with the header and is completely seperate. The header is flexible and allows you to pass in attributes to toggle the different states. Here is the recommended user flow to achieve these results.
- A user clicks sign in and they are redirected to console.
- The user logs in through console and gets redirected back to your application.
- After redirect add the following attributes to the header that are provided through authentication.
- When a user clicks log out, the state of the header changes and an event fires allowing you to make any service calls you need to so you can log out of the application"
All these attributes are required AFTER a user has been authenticated.
|The number of notifications the user has, this will display in the header.|
|The name of the user, used to build the avatar|
|When true, the header changes to a logged in state.|
All these attributes are optional.
|Choose between a 'light' and 'dark' header theme|
|Enter a URL that you want the logo to direct to, if unset the logo link is removed.|
pearson-header emits one event:
|Will fire when the user clicks the logout button|
Do you want to build out a custom header? No problem, use the markup below along with CSS to make your own header.