Login page

Use the login page pattern when your users are requested to authenticate in order to access products or sensitive data.

Previewlink

Preview of desktop and mobile login

Structurelink

The login page consists of a form defined by the product with required input from the user, a logo, actions and support links. Here is an image which is used in desktop mode to represent the solution.

Structure of a login page

How it workslink

Use as the login template for retail or corporate application login page. You can extend the number of input fields and actions and replace the image and branding logo for white labelling.

Desktop
Default view
Default desktop login page
Active and error state
Active and error states for login page
Corporate banking example
Usage of corporate id in login form
Mobile
Preview of login page structure on mobile

Tools to build the login pagelink

You can use the app starter kit or get the login pattern Sketch resource.

App starter kit