Sign in to continue

Use this pattern to interrupt a task or process where a user needs to sign in.

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.

Create a page element containing:

• a page title of '[website or application name]'
• a page header with 'Please sign in to continue' as a h1 header
• a lead paragraph using .bsk-lead with 'We need to check you are allowed to use this part of this service.'
• a section containing:
  • 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

<main>
  <h1>Please sign in to continue</h1>
  <hr>
  <p class="bsk-lead">We need to check you are allowed to use this part of this service.</p>
  <section class="my-10">
      <a class="bsk-btn bsk-btn-ms-account" href="#">
          <object class="bsk-ms-pictogram inline-block" type="image/svg+xml" data="https://cdn.web.bas.ac.uk/bas-style-kit/0.7.4-beta.1/img/logos-symbols/ms-pictogram.svg"></object>
          Sign in to Continue
      </a>
  </section>
  <section>
      <p>Use the account you use for your NERC email to sign into this service.</p>
      <p>Contact the <a href="mailto:servicedesk@bas.ac.uk">IT Service Desk</a> if you are unable to sign in.</p>
  </section>tact the <a href="mailto:servicedesk.bas.ac.uk">BAS IT Service Desk</a> for more information.</p>
</main>