Splash Screen

A splash screen is an optional screen that may appear when the user first opens an application.

Description


When to Use

Splash screens are most commonly used for desktop applications in the following instances:

  • When a user is required to sign in before accessing the application
  • When a user is required to read and/or acknowledge information before accessing the application
  • When the application takes time to load and the user should be provided an indication of the loading process.

When Not to Use

  • Do not use for applications that load quickly and do not require the user to sign in and/or be made aware of specific information prior to accessing the application.

Variations

There are two variations of the sign in screen:

  • Simple: use when the only content on the screen is the Sabre logo and the name of the application.
  • Content: use when there is additional content on the page (text, input fields, etc.)

Simple Example

The content of the splash screen can vary based on the needs of the application. However, the following elements are required on the screen:

  • Sabre logo
  • Name of application
  • Footer (may contain copyright, logo and any other links relevant to the application)


Content Example

The following information may also be included on a splash screen. If any of these elements appear, they should be displayed inside of a Panel .

  • Loading Indicator (determinate or indeterminate): displays AFTER sign in if sign in fields appear on this screen.
  • Brief context/text below the application name
  • Sign in fields (username, password, etc). See text input fields.
  • A single button for the primary call to action. Text links for any additional actions.
  • Forgot sign in link
  • Register/Create an account link
  • Legal text/disclaimers


Developer Notes

Simple Example

<div class="spark-content__wrapper--sticky-footer">

  <article class="spark-splash-screen spark-main--sticky-footer">
    <section class="spark-splash-screen__content">
      <div class="spark-splash-screen__center">
        <i class="spark-logo spark-logo--sabre spark-logo--lg"></i>
        <h1 class="spark-splash-screen__heading">Enterprise Design Language</h1>
      </div>
    </section>
  </article>

  <footer class="spark-footer">
    <div class="container">
      <a class="spark-footer__logo spark-hidden--lte-sm" title="Sabre"><i class="spark-logo spark-logo--sabre spark-logo--xs"></i></a>
      <div class="spark-footer__content">
        <div class="spark-footer__copyright">
          © 2015-16 Sabre <span class="spark-hidden--lte-md">Curabitur blandit tempus porttitor.</span>
        </div>
        <ul class="spark-footer__list">
          <li class="spark-footer__list-item">
            <a class="spark-footer__list-link" href="javascript: void(0);">
              Legal Policy
            </a>
          </li>
          <li class="spark-footer__list-item">
            <a class="spark-footer__list-link" href="javascript: void(0);">
              Contact Us
            </a>
          </li>
          <li class="spark-footer__list-item">
            <a class="spark-footer__list-link" href="javascript: void(0);">
              Support
            </a>
          </li>
        </ul>
      </div>
      <ul class="spark-footer__list spark-footer__list--right spark-footer__list--icons">
        <li class="spark-footer__list-item">
          <a class="spark-footer__list-link" title="Twitter">
            <i class="spark-icon-social-twitter spark-icon--fill"></i>
          </a>
        </li>
        <li class="spark-footer__list-item">
          <a class="spark-footer__list-link" title="Facebook">
            <i class="spark-icon-social-facebook spark-icon--fill"></i>
          </a>
        </li>
        <li class="spark-footer__list-item">
          <a class="spark-footer__list-link" title="LinkedIn">
            <i class="spark-icon-social-linkedin spark-icon--fill"></i>
          </a>
        </li>
        <li class="spark-footer__list-item">
          <a class="spark-footer__list-link" title="Instagram">
            <i class="spark-icon-social-instagram spark-icon--fill"></i>
          </a>
        </li>
        <li class="spark-footer__list-item">
          <a class="spark-footer__list-link" title="YouTube">
            <i class="spark-icon-social-youtube spark-icon--fill"></i>
          </a>
        </li>
      </ul>
    </div>
  </footer>

</div>

Content Example

<div class="spark-content__wrapper--sticky-footer">

  <article class="spark-splash-screen spark-splash-screen--panel spark-main--sticky-footer">
    <section class="spark-splash-screen__content">
      <div class="spark-panel spark-splash-screen__center col-xs-12 col-md-6 col-xl-4">
        <div class="spark-panel__content">
          <i class="spark-logo spark-logo--sabre spark-logo--md spark-logo--sabre-red"></i>
          <h3 class="spark-splash-screen__heading">Enterprise Design Language</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisici elit, sed
            eiusmod tempor incidunt ut labore et dolore magna aliqua.
            Fictum,  deserunt mollit anim laborum astutumque!
          </p>
          <p>
            <a href="#" class="spark-btn spark-btn--md spark-btn--primary">Continue</a>
          </p>
        </div>
      </div>
    </section>
  </article>

  <footer class="spark-footer">
    <div class="container">
      <a class="spark-footer__logo spark-hidden--lte-sm" title="Sabre"><i class="spark-logo spark-logo--sabre spark-logo--xs"></i></a>
      <div class="spark-footer__content">
        <div class="spark-footer__copyright">
          © 2015-16 Sabre <span class="spark-hidden--lte-md">Curabitur blandit tempus porttitor.</span>
        </div>
        <ul class="spark-footer__list">
          <li class="spark-footer__list-item">
            <a class="spark-footer__list-link" href="javascript: void(0);">
              Legal Policy
            </a>
          </li>
          <li class="spark-footer__list-item">
            <a class="spark-footer__list-link" href="javascript: void(0);">
              Contact Us
            </a>
          </li>
          <li class="spark-footer__list-item">
            <a class="spark-footer__list-link" href="javascript: void(0);">
              Support
            </a>
          </li>
        </ul>
      </div>
      <ul class="spark-footer__list spark-footer__list--right spark-footer__list--icons">
        <li class="spark-footer__list-item">
          <a class="spark-footer__list-link" title="Twitter">
            <i class="spark-icon-social-twitter spark-icon--fill"></i>
          </a>
        </li>
        <li class="spark-footer__list-item">
          <a class="spark-footer__list-link" title="Facebook">
            <i class="spark-icon-social-facebook spark-icon--fill"></i>
          </a>
        </li>
        <li class="spark-footer__list-item">
          <a class="spark-footer__list-link" title="LinkedIn">
            <i class="spark-icon-social-linkedin spark-icon--fill"></i>
          </a>
        </li>
        <li class="spark-footer__list-item">
          <a class="spark-footer__list-link" title="Instagram">
            <i class="spark-icon-social-instagram spark-icon--fill"></i>
          </a>
        </li>
        <li class="spark-footer__list-item">
          <a class="spark-footer__list-link" title="YouTube">
            <i class="spark-icon-social-youtube spark-icon--fill"></i>
          </a>
        </li>
      </ul>
    </div>
  </footer>

</div>


A splash screen is created by adding a top-level element with the .spark-splash-screen class. An element with a class of .spark-splash-screen__content should contain any content you wish to display. This content area will fill as much of the screen as it can and will vertically center its content.

An element with the .spark-splash-screen__center will horizontally center itself. This element may also contain the .spark-panel class if you wish to display your content inside of a panel.