Skip to main content
live This is a new website – your feedback will help us to improve it.

Sign in to continue

Overview

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.

Uses

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.

Variants

Basic

Use the .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 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 with the .bsk-call-to-action class, containing:
  • a section with the .bsk-sign-in-information class, 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

Please sign in to continue

We need to check you are allowed to use this part of this service.

<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.7.3/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:servicedesk@bas.ac.uk">IT Service Desk</a> if you are unable to sign in.</p>
  </section>
</main>

Open full example