New This website is new, your feedback will help us to improve it.

Start page

Overview

Use this pattern to introduce transactional processes or tasks.

This pattern is based on the start pattern from the Government Digital Service (GDS) Design System.

Uses

Use this pattern to introduce a service to users where it allows them to complete a task or process.

When using this pattern, do:

  • include the name of the service
  • include a list of tasks the service can be used for, so that the user can check they are using the right service
  • include information on who can use a service and why, if it is restricted
  • include a list of things a user must have done or information they need to know, such as their employee number
  • include links to other relevant information about a service such as documentation and the team that provides support

When using this pattern, do not:

  • change the style and text of the Start Now button, except where the Sign in to start variant is used

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 for providing support, as they may be on holiday or change role.

Variants

Basic

Create a page element containing:

  • a page title of '[website or application name]'
  • a page header with '[website or application name]' as a h1 header
  • a section containing:
    • a h2 header with the .bsk-h3 class that says 'Use this service to:'
    • an unordered list of tasks the service allows the user to do
  • a section containing:
    • a primary button, that takes the user to the start of a process or task
  • a section containing:
    • a h2 header that says 'More information'
    • a point of contact for the service

If you are using the Font Awesome icons, include the start now icon in the start now button.


[website or application]

Use this service to:

  • book a training course
  • manage your training course bookings
  • access training material for a training course
  • give feedback after a training course

More information

Contact the Example team for information and help on how to use [website or application].

<main>
  <h1>[website or application]</h1>
  <hr>
  <section class="my-6">
      <h2 class="bsk-lead">Use this service to:</h2>
      <ul>
          <li>book a training course</li>
          <li>manage your training course bookings</li>
          <li>access training material for a training course</li>
          <li>give feedback after a training course</li>
      </ul>
  </section>
  <section class="my-6">
      <button class="bsk-btn bsk-btn-primary bsk-btn-lg">Start Now <i class="fa-fw fas fa-chevron-right"></i></button>
  </section>
  <section>
      <h2 class="bsk-lead">More information</h2>
      <p>Contact the <a href="#">Example team</a> for information and help on how to use [website or application].</p>
  </section>
</main>

This example does not use heading elements to prevent breaking the table of contents.

Before you start

[website or application]

Use this service to:

  • book a training course
  • manage your training course bookings
  • access training material for a training course
  • give feedback after a training course

Before you start

You need approval from your line manager to book training courses.

More information

Contact the Example team for information and help on how to use [website or application].

<main>
  <h1>[website or application]</h1>
  <hr>
  <section class="my-6">
      <h2 class="bsk-lead">Use this service to:</h2>
      <ul>
          <li>book a training course</li>
          <li>manage your training course bookings</li>
          <li>access training material for a training course</li>
          <li>give feedback after a training course</li>
      </ul>
  </section>
  <section class="my-6">
      <button class="bsk-btn bsk-btn-primary bsk-btn-lg">Start Now <i class="fa-fw fas fa-chevron-right"></i></button>
  </section>
  <section class="my-6">
      <h2 class="bsk-lead">Before you start</h2>
      <p>You need approval from your line manager to book training courses.</p>
  </section> 
  <section>
      <h2 class="bsk-lead">More information</h2>
      <p>Contact the <a href="#">Example team</a> for information and help on how to use [website or application].</p>
  </section>
</main>

This example does not use heading elements to prevent breaking the table of contents.

Sign in to start

Where a service requires a user to sign in to start:

  • in the 'before you start' section:
  • in the 'call to action' section:
    • change the Start Now button to read 'Sign in to Start' and use the Microsoft sign in button variant
    • add a paragraph with text-muted describing the account users need to sign in with
  • in the 'more information' section:
    • add an additional point of contact if users have problems signing in

[website or application]

Use this service to:

  • administer training courses
This service can only be used by members of the Example team.

Use the account you use for your NERC email to sign into this service.

More information

Contact the IT Service Desk if you are unable to sign in.

<main>
  <h1>[website or application]</h1>
  <hr>
  <section class="my-6">
      <h2 class="bsk-lead">Use this service to:</h2>
      <ul>
          <li>administer training courses</li>
      </ul>
      <div class="bsk-alert bsk-alert-highlight bsk-alert-info">
          This service can only be used by members of the Example team.
      </div>
  </section>
  <section class="my-6">
      <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 Start
      </a>
      <p class="bsk-text-muted">Use the account you use for your NERC email to sign into this service.</p>
  </section>
  <section>
      <h2 class="bsk-lead">More information</h2>
      <p>Contact the <a href="mailto:servicedesk@bas.ac.uk">IT Service Desk</a> if you are unable to sign in.</p>
  </section>
</main>

This example does not use heading elements to prevent breaking the table of contents.