Overview

• Back to top

• Link to section

Use this pattern to introduce transactional processes or tasks.

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

• Back to top

• Link to section

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.

Variants

• Back to top

• Link to section

Basic

• Live

• Added in version 0.6.0

• Back to top

• Link to section

Use the .bsk-pattern-page-start class to 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 with the .bsk-service-uses class, 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 with the .bsk-call-to-action class, containing:
  • a primary button, that takes the user to the start of a process or task
• a section with the .bsk-more-information class, containing:
  • a h2 header with the .bsk-h3 class that says ‘More information’
  • a point of contact for the service

<main class="bsk-pattern-start">
  <h1 class="bsk-page-header">[website or application]</h1>
  <section class="bsk-service-uses">
    <div class="bsk-h3">Use this service to:</div>
    <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="bsk-call-to-action">
    <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="bsk-more-information">
    <div class="bsk-h3">More information</div>
    <p>Contact the <a href="#">Example team</a> for information and help on how to use [website or application].</p>
  </section>
</main>

Open full example

Before you start

• Live

• Added in version 0.6.0

• Back to top

• Link to section

If relevant, add a section with the .bsk-before-you-start class, containing:

• a h2 header with the .bsk-h3 class that says ‘Before you start’
• preconditions, prerequisites or information a user needs to fulfil or know to use the service

<main class="bsk-pattern-start">
  <h1 class="bsk-page-header">[website or application]</h1>
  <section class="bsk-service-uses">
    <div class="bsk-h3">Use this service to:</div>
    <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="bsk-call-to-action">
    <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="bsk-before-you-start">
    <div class="bsk-h3">Before you start</div>
    <p>You need approval from your line manager to book training courses.</p>
  </section>
  <section class="bsk-more-information">
    <div class="bsk-h3">More information</div>
    <p>Contact the <a href="#">Example team</a> for more information and help with [website or application].</p>
  </section>
</main>

Open full example

Sign in to start

• Live

• Added in version 0.6.0

• Back to top

• Link to section

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

• in the ‘before you start’ section:
  • add a info highlight alert with information on who can or can’t use a service
• 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 .bsk-sign-in-hint.bsk-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

<main class="bsk-pattern-start">
  <h1 class="bsk-page-header">[website or application]</h1>
  <section class="bsk-service-uses">
    <div class="bsk-h3">Use this service to:</div>
    <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="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 Start
    </a>
    <p class="bsk-sign-in-hint bsk-text-muted">Use the account you use for your NERC email to sign into this service.</p>
  </section>
  <section class="bsk-more-information">
    <div class="bsk-h3">More information</div>
    <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