Use this pattern to interrupt a task or process where a user needs to sign in.
Page patterns represent complete pages that should be used with few changes to promote consistency. If you are using one of the Style Kit’s themes or templates, this page pattern is available as a special layout or view.
Use this pattern where a user’s identity is needed to complete a task or process.
This pattern is intended to require users to sign in when they have to, rather than as an initial step that isn’t always needed. For example, you may need to sign in to manage items but not to view them.
When using this pattern, do not:
- change the style and text of the Sign in to Continue button
Where known, include an email address for, or link to information on, a team that can provide information on the service. If there isn’t a contact for a service, use the BAS IT Service Desk.
Try not to use specific people as contacts, as they may be on holiday or change role.
.bsk-pattern-sign-in class to create a page element containing:
- a page title of ‘[website or application name]’
- a page header with ‘Please sign in to continue’ as a
- a lead paragraph using
.bsk-leadwith ‘We need to check you are allowed to use this part of this service.’
- a section with the
- a Microsoft sign in button with ‘Sign in to Continue’
- a section with the
- a description of the account users need to sign in with
- a point of contact for the service
- a point of contact if users have problems signing in
Please sign in to continue
We need to check you are allowed to use this part of this service.
Use the account you use for your NERC email to sign into this service.
Contact the IT Service Desk if you are unable to sign in.
<main class="bsk-pattern-sign-in"> <h1 class="bsk-page-header">Please sign in to continue</h1> <p class="bsk-lead">We need to check you are allowed to use this part of this service.</p> <section class="bsk-call-to-action"> <a class="bsk-btn bsk-btn-ms-account bsk-btn-lg" href="#"> <object class="bsk-ms-pictogram" type="image/svg+xml" data="https://cdn.web.bas.ac.uk/bas-style-kit/0.6.1/img/logos-symbols/ms-pictogram.svg"></object> Sign in to Continue </a> </section> <section class="bsk-sign-in-information"> <p>Use the account you use for your NERC email to sign into this service.</p> <p>Contact the <a href="mailto:email@example.com">IT Service Desk</a> if you are unable to sign in.</p> </section> </main>