Skip Navigation

Toast Notifications

Toast notifications are messages that disappear automatically after a defined amount of time.

Standard Toasts

Standard toast messages appear at the top of the screen (below the header) and provide a brief notification to users. They may also appear contextually within the screen. See below for variations.


When to Use

  • Non-critical messages intended to interrupt the user from a task with an important update (to make the user aware, even though no action is required)
  • The message pertains to the entire screen or application.
  • The message is displayed upon initial load or refresh of a page, when the user is likely to be looking at the top of the screen.

When Not to Use

  • The user may need persistent access to the content or links in the message.
  • The user is required to take an immediate action based on the message.

Variations

Usage

Toast notifications are best used for non-critical messages intended to interrupt the user from a task with an important update (to make the user aware, even though no action is needed).

Because this movement is attention-getting, toasts should be used sparingly.

In addition to the screen-level, toasts may appear within individual containers (panels, tables). They should not appear within individual form elements. Validation messages should be used in this context.

Display

Toast notifications will display below the element they are attached to and will fill the full width of that element. Typically this will be beneath the header for the page or the component. Toast notifications will display on the screen even if the header is not visible.

If the toast notification is attached to a fixed element, for instance, a page level navigation bar, the toast notification will display beneath that fixed element.

Toast notification details should be a single sentence ending with a period.

Status

There are three status types that a toast may be assigned:

  • Neutral: no specific positive or negative connotation
  • Positive: indicating success or other desired status
  • Warning: indicating a potential problem
  • They are not recommended for error messaging. See validation messaging instead.

Neutral toast notification

Positive toast notification

Warning toast notification

Time Considerations

Toast notifications should be displayed for a minimum of 3 seconds. A good rule of thumb is 3 seconds + 60ms for each letter. This allows enough time for the message to be read and comprehended.

Variations

Page-Level

Standard page-level toast notifications appear at the top of the screen (below the header) and provide a brief notification to users. If the header is not visible on the screen then the toast notification will appear at the top of the page.


Fixed header pagel-level toast notifications will also appear at the top of the screen (below the header) and remain below the header even as the page scrolls.


Container-Level

These are identical to the page-level toast messages, but they appear within a single panel, table or tabbed set within the screen. Toasts may appear either at the top of the panel or below a header element for for the panel.

Scroll through this example and click any of the buttons to see the toast appear at the top of the container.


Toast may also appear within tabbed containers.


Actions Within a Toast Message

Links and buttons providing navigation are not recommended within Toast notifications. However, a “DISMISS” link may appear, allowing the user to dismiss the notification before the time expires. Try disabling Mary Brown.


Developer Notes

Instantiate the component by calling new Spark.Toast(el) or $(el).sparkToast().

The following options may be passed when using new Spark.Toast(el, {}); , $(el).Toast({}); or call the open method on a currently existing toast component:

Name Type Default Description
elHeader DOM Object null this value is used to display the toast messages below the heading of a panel or the top navigation. This value MUST be set when the object is instantiated. This is the only value that may not be modified with the open method call.
type enum positive, neutral, warning positive this value applies the color styles to the notification, positive, neutral or warning
title string '' A short title for the notification.
details string '' A longer description about the toast notification. an example would be providing positive feed-back on a user action.
icon spark icon string '' This icon should reinforce the type of notification such as spark-icon-check for success or spark-icon-alert-triangle (Refer to the full Spark Streamline Icon set for available icons).
duration float 3 Duration that the toast will display in seconds a value of 3 would display the notification for 3 seconds before auto removing, 4.5 would display the message for 4.5 seconds. The minimum recommend value for for accessibility is 3 seconds. Although more time may be needed for longer messages.
actionIcon spark icon class '' Optional, spark icon, spark-icon-close is the icon used in examples. If both the actionIcon and actionLabel are specified then only the actionIcon will be displayed
actionLabel string '' Optional, should be a one word action in UPPER case, such as DISMISS. If both the actionIcon and actionLabel are specified then only the actionIcon will be displayed

For all available methods and full API, refer to the component code on Bitbucket.

Toasts in Tables

<section class="spark-table spark-pad-0" data-toast="toast-table">
  <header class="spark-table__header spark-pad-1">
    <div class="col-lg-12">
      <h2 class="spark-mar-b-0">Panel Title</h2>
    </div>
  </header>
  <div class="spark-table__scroll">
    <table role="grid" class="spark-mar-b-0">
      <thead>
        <tr>
          <th data-sort="">Last Name</th>
          <th data-sort="">First Name</th>
          <th data-sort="">Access Level</th>
          <th data-sort="">Role</th>
          <th data-sort="">Created By</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td> Anderson </td>
          <td> James </td>
          <td> Chain </td>
          <td> Staff, Concierge </td>
          <td> White, Daniel </td>
          <td><button class="spark-btn--icon spark-icon spark-icon-user-ban spark-tooltip"><span class="spark-tooltip__content--top" role="tooltip">Deactivate User</span></button></td>
        </tr>
        <tr>
          <td> Brown </td>
          <td> Mary </td>
          <td> Brand </td>
          <td> Staff </td>
          <td> White, Daniel </td>
          <td><button class="spark-btn--icon spark-icon spark-icon-user-ban spark-tooltip"><span class="spark-tooltip__content--top" role="tooltip">Deactivate User</span></button></td>
        </tr>
        <tr>
          <td> Clark </td>
          <td> John </td>
          <td> Brand </td>
          <td> Admin </td>
          <td> Robinson, Jessica </td>
          <td><button class="spark-btn--icon spark-icon spark-icon-user-ban spark-tooltip"><span class="spark-tooltip__content--top" role="tooltip">Deactivate User</span></button></td>
        </tr>
        <tr>
          <td> Davis </td>
          <td> Patricia </td>
          <td> Brand </td>
          <td> Reviewer </td>
          <td> White, Daniel </td>
          <td><button class="spark-btn--icon spark-icon spark-icon-user-ban spark-tooltip"><span class="spark-tooltip__content--top" role="tooltip">Deactivate User</span></button></td>
        </tr>
        <tr>
          <td> Garcia </td>
          <td> Robert </td>
          <td> Hotel </td>
          <td> Admin </td>
          <td> Clark, John </td>
          <td><button class="spark-btn--icon spark-icon spark-icon-user-ban spark-tooltip"><span class="spark-tooltip__content--top" role="tooltip">Deactivate User</span></button></td>
        </tr>
        <tr>
          <td> Harris </td>
          <td> Jennifer </td>
          <td> Hotel </td>
          <td> Housekeeping </td>
          <td> White, Daniel </td>
          <td><button class="spark-btn--icon spark-icon spark-icon-user-ban spark-tooltip"><span class="spark-tooltip__content--top" role="tooltip">Deactivate User</span></button></td>
        </tr>
        <tr>
          <td> Jackson </td>
          <td> Michael </td>
          <td> Hotel </td>
          <td> Staff </td>
          <td> White, Daniel </td>
          <td><button class="spark-btn--icon spark-icon spark-icon-user-ban spark-tooltip"><span class="spark-tooltip__content--top" role="tooltip">Deactivate User</span></button></td>
        </tr>
        <tr>
          <td> Johnson </td>
          <td> Elizabeth </td>
          <td> Hotel </td>
          <td> Staff </td>
          <td> White, Daniel </td>
          <td><button class="spark-btn--icon spark-icon spark-icon-user-ban spark-tooltip"><span class="spark-tooltip__content--top" role="tooltip">Deactivate User</span></button></td>
        </tr>
        <tr>
          <td> Jones </td>
          <td> William </td>
          <td> Brand </td>
          <td> Reservation Agent </td>
          <td> White, Daniel </td>
          <td><button class="spark-btn--icon spark-icon spark-icon-user-ban spark-tooltip"><span class="spark-tooltip__content--top" role="tooltip">Deactivate User</span></button></td>
        </tr>
        <tr>
          <td> Lee&nbsp; </td>
          <td> Linda </td>
          <td> Hotel </td>
          <td> Staff </td>
          <td> White, Daniel </td>
          <td><button class="spark-btn--icon spark-icon spark-icon-user-ban spark-tooltip"><span class="spark-tooltip__content--top" role="tooltip">Deactivate User</span></button></td>
        </tr>
        <tr>
          <td> Lewis </td>
          <td> David </td>
          <td> Chain </td>
          <td> Concierge, Bell Staff </td>
          <td> White, Daniel </td>
          <td><button class="spark-btn--icon spark-icon spark-icon-user-ban spark-tooltip"><span class="spark-tooltip__content--top" role="tooltip">Deactivate User</span></button></td>
        </tr>
        <tr>
          <td> Martin </td>
          <td> Barbara </td>
          <td> Hotel&nbsp; </td>
          <td> Bell Staff </td>
          <td> White, Daniel </td>
          <td><button class="spark-btn--icon spark-icon spark-icon-user-ban spark-tooltip"><span class="spark-tooltip__content--top" role="tooltip">Deactivate User</span></button></td>
        </tr>
        <tr>
          <td> Martinez </td>
          <td> Richard </td>
          <td> Hotel </td>
          <td> General Manager </td>
          <td> White, Daniel </td>
          <td><button class="spark-btn--icon spark-icon spark-icon-user-ban spark-tooltip"><span class="spark-tooltip__content--top" role="tooltip">Deactivate User</span></button></td>
        </tr>
        <tr>
          <td> Miller </td>
          <td> Susan </td>
          <td> Hotel </td>
          <td> Front Desk Supervisor </td>
          <td> White, Daniel </td>
          <td><button class="spark-btn--icon spark-icon spark-icon-user-ban spark-tooltip"><span class="spark-tooltip__content--top" role="tooltip">Deactivate User</span></button></td>
        </tr>
        <tr>
          <td> Moore </td>
          <td> Joseph </td>
          <td> Brand </td>
          <td> Sales &amp; Marketing </td>
          <td> White, Daniel </td>
          <td><button class="spark-btn--icon spark-icon spark-icon-user-ban spark-tooltip"><span class="spark-tooltip__content--top" role="tooltip">Deactivate User</span></button></td>
        </tr>
        <tr>
          <td> Robinson </td>
          <td> Jessica </td>
          <td> Chain </td>
          <td> Admin </td>
          <td> White, Daniel </td>
          <td><button class="spark-btn--icon spark-icon spark-icon-user-ban spark-tooltip"><span class="spark-tooltip__content--top" role="tooltip">Deactivate User</span></button></td>
        </tr>
        <tr>
          <td> Rodriguez </td>
          <td> Thomas </td>
          <td> Brand </td>
          <td> Staff </td>
          <td> White, Daniel </td>
          <td><button class="spark-btn--icon spark-icon spark-icon-user-ban spark-tooltip"><span class="spark-tooltip__content--top" role="tooltip">Deactivate User</span></button></td>
        </tr>
        <tr>
          <td> Smith </td>
          <td> Margaret </td>
          <td> Brand </td>
          <td> Spa General </td>
          <td> White, Daniel </td>
          <td><button class="spark-btn--icon spark-icon spark-icon-user-ban spark-tooltip"><span class="spark-tooltip__content--top" role="tooltip">Deactivate User</span></button></td>
        </tr>
        <tr>
          <td> Taylor </td>
          <td> Charles </td>
          <td> Hotel </td>
          <td> Staff </td>
          <td> White, Daniel </td>
          <td><button class="spark-btn--icon spark-icon spark-icon-user-ban spark-tooltip"><span class="spark-tooltip__content--top" role="tooltip">Deactivate User</span></button></td>
        </tr>
        <tr>
          <td> Thomas </td>
          <td> Sarah </td>
          <td> Brand </td>
          <td> Staff </td>
          <td> White, Daniel </td>
          <td><button class="spark-btn--icon spark-icon spark-icon-user-ban spark-tooltip"><span class="spark-tooltip__content--top" role="tooltip">Deactivate User</span></button></td>
        </tr>
        <tr>
          <td> Thompson </td>
          <td> Christopher </td>
          <td> Chain </td>
          <td> Staff </td>
          <td> White, Daniel </td>
          <td><button class="spark-btn--icon spark-icon spark-icon-user-ban spark-tooltip"><span class="spark-tooltip__content--top" role="tooltip">Deactivate User</span></button></td>
        </tr>
        <tr>
          <td> Walker </td>
          <td> Karen </td>
          <td> Hotel </td>
          <td> Reservations Manager </td>
          <td> White, Daniel </td>
          <td><button class="spark-btn--icon spark-icon spark-icon-user-ban spark-tooltip"><span class="spark-tooltip__content--top" role="tooltip">Deactivate User</span></button></td>
        </tr>
        <tr>
          <td> White </td>
          <td> Daniel </td>
          <td> Hotel </td>
          <td> Admin </td>
          <td> Clark, John </td>
          <td><button class="spark-btn--icon spark-icon spark-icon-user-ban spark-tooltip"><span class="spark-tooltip__content--top" role="tooltip">Deactivate User</span></button></td>
        </tr>
        <tr>
          <td> Williams </td>
          <td> Nancy </td>
          <td> Hotel </td>
          <td> Corporate </td>
          <td> Clark, John </td>
          <td><button class="spark-btn--icon spark-icon spark-icon-user-ban spark-tooltip"><span class="spark-tooltip__content--top" role="tooltip">Deactivate User</span></button></td>
        </tr>
        <tr>
          <td> Wilson </td>
          <td> Matthew </td>
          <td> Hotel </td>
          <td> Concierge </td>
          <td> White, Daniel </td>
          <td><button class="spark-btn--icon spark-icon spark-icon-user-ban spark-tooltip"><span class="spark-tooltip__content--top" role="tooltip">Deactivate User</span></button></td>
        </tr>
      </tbody>
    </table>
  </div>
</section>
<style>
.spark-table tr td:last-child{
  white-space: nowrap;
}
.spark-table tr td:nth-child(4),.spark-table th:nth-child(4){
    display:none;
    }

</style>

<style type="text/css">
  
</style>
// Vanilla JS
// attach the toast so that it appears below the header of the table;
// you MUST specify the elHeader element before you create the spark component.
var panelToast = new Spark.Toast(document.querySelector('[data-toast="toast-table"]',{elHeader:document.querySelector('[data-toast="toast-table"] header')}));

//Some async call happened from an action on the on the table and it was good.
panelToast.open({
  title: 'Success',
  duration: 3,
  details: 'Disabled [CLIENT NAME]',
  icon: 'spark-icon-check',
  type: 'positive',
  actionLabel: '',
  actionIcon: ''
});
//some event occurred and the user can't perform the action.
panelToast.open({
  title: 'Sorry',
  duration: 4,
  details: 'Unable to disable [CLIENT NAME]',
  icon: 'spark-icon-alert-triangle',
  type: 'warning',
  actionLabel: 'DISMISS',
  actionIcon: 'spark-icon-close'
});
//Maybe the event was cancelled, let the user know that nothing changed
panelToast.open({
  title: 'Status Update',
  icon: 'spark-icon-announce',
  actionLabel: 'DISMISS',
  duration: 3.5,
  actionIcon: '',
  details: 'No changes made to [CLIENT NAME]',
  type: 'neutral't
});
//settings for a positive notification

Toasts with a Fixed Header

<header class="spark-header spark-header--fixed" data-toast="header">
  <nav class="spark-header__nav" role="navigation">
    <button class="spark-menu__toggle spark-header__toggle" title="View Navigation">
      <i class="spark-icon--fill spark-icon-menu-hamburger spark-icon--md"></i>
    </button>
    <span class="spark-header__logo"><i class="spark-logo spark-logo--sabre spark-logo--sm">Sabre</i></span>
    <a href="#" class="spark-header__title">Product™</a>
    <div class="spark-menu spark-header__menu" role="menu">
      <div class="spark-menu__header">
        <button class="spark-menu__toggle" title="Hide Navigation">
          <i class="spark-icon--fill spark-icon-close"></i>
        </button>
        <span class="spark-menu__title"></span>
      </div>
      <ul class="spark-menu__list spark-header__list spark-header__list--overflow">
        <li class="spark-menu__list-item" role="menuitem">
          <a href="#" class="spark-menu__list-link">Dashboard</a>
        </li>
        <li class="spark-menu__list-item active" role="menuitem">
          <a href="#" class="spark-menu__list-link">Flight Analysis</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <span class="spark-menu__list-links">
            <a href="#" class="spark-menu__list-link">Market Analysis</a>
            <button class="spark-menu__list-expand" role="menuitemcheckbox" title="Expand"></button>
          </span>
          <ul class="spark-menu__list">
            <li class="spark-menu__list-item" role="menuitem">
              <a href="#" class="spark-menu__list-link">Menu Option 1</a>
            </li>
            <li class="spark-menu__list-item" role="menuitem">
              <span class="spark-menu__list-links">
                <a href="#" class="spark-menu__list-link">Menu Option 2</a>
                <button class="spark-menu__list-expand" role="menuitemcheckbox" title="Expand"></button>
              </span>
              <ul class="spark-menu__list">
                <li class="spark-menu__list-item" role="menuitem">
                  <a href="#" class="spark-menu__list-link">Sub Nav Item 1</a>
                </li>
                <li class="spark-menu__list-item" role="menuitem">
                  <a href="#" class="spark-menu__list-link">Sub Nav Item 2</a>
                </li>
                <li class="spark-menu__list-item" role="menuitem">
                  <a href="#" class="spark-menu__list-link">Sub Nav Item 3</a>
                </li>
                <li class="spark-menu__list-item" role="menuitem">
                  <a href="#" class="spark-menu__list-link">Sub Nav Item 4 That Has A Really Long Title</a>
                </li>
              </ul>
            </li>
            <li class="spark-menu__list-item" role="menuitem">
              <a href="#" class="spark-menu__list-link">Menu Option 3</a>
            </li>
            <li class="spark-menu__list-item" role="menuitem">
              <a href="#" class="spark-menu__list-link"><i class="spark-icon-announce"></i> Menu Option 4 w/ Icon</a>
            </li>
            <li class="spark-menu__list-item" role="menuitem">
              <a href="#" class="spark-menu__list-link">Menu Option 5 w/ A Really Long Title</a>
            </li>
          </ul>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a href="#" class="spark-menu__list-link">Nav Item 8</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a href="#" class="spark-menu__list-link">Nav Item 9</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a href="#" class="spark-menu__list-link">Nav Item 10</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a href="#" class="spark-menu__list-link">Nav Item 11</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a href="#" class="spark-menu__list-link">Nav Item 12</a>
        </li>
      </ul>
      <ul class="spark-menu__list">
        <li class="spark-menu__list-item spark-menu__list-item--secondary" role="menuitem">
          <a href="#" class="spark-menu__list-link spark-menu__ignore">
            <i class="spark-icon--fill spark-icon-search spark-icon--md"></i>
            <span class="spark-header__collapsed-show">Search</span>
          </a>
        </li>
        <li class="spark-menu__list-item spark-menu__list-item--secondary" role="menuitem">
          <a href="#" class="spark-menu__list-link spark-menu__ignore">
            <i class="spark-icon--fill spark-icon-cog spark-icon--md"></i>
            <span class="spark-header__collapsed-show">Account Settings</span>
          </a>
        </li>
      </ul>
    </div>
    <div class="spark-header__sign-in spark-popover">
      <a href="#" class="spark-menu__list-link spark-popover__toggle">Sign In</a>
      <form class="spark-popover__content--bottom col-xs-8 col-md-4" role="tooltip" onsubmit="return false;" data-anchor-x="right">
        <a href="#" class="spark-popover__close" title="Close"></a>
        <h4>Account Sign In</h4>
        <label class="spark-input spark-margin-top">
          <input class="spark-input__field" name="username" role="textbox">
          <span class="spark-label">Username</span>
        </label>
        <label class="spark-input">
          <input class="spark-input__field" name="password" type="password" role="textbox">
          <span class="spark-label">Password</span>
        </label>
        <button class="spark-btn spark-btn--md spark-btn--block">Sign In</button>
        <div class="spark-text-center spark-margin-top">
          <button class="spark-btn--link spark-eta">Forgot username or password?</button>
        </div>
        <span class="spark-popover__caret"></span>
      </form>
    </div>
  </nav>
</header>
<main id="content">
  <div class="container">
    <div class="row spark-margin-top--lg">
      <div class="col-xs-12">
        <div class="spark-panel" style="height: 1600px">
          <div class="spark-panel__content">
            <button class="spark-btn spark-btn--md" data-toast="make-toast">Make Toast</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>


<style type="text/css">
  
</style>
// Vanilla JS
// You will want to specify the ElHeader so that it will always appear below the main navigation.
// this message will only autoclose, no action required.
var panelToast = new Spark.Toast(document.querySelector('[data-toast="header"]',{elHeader: document.querySelector('[data-toast="header"] .spark-header__nav')}));
//settings for a positive notification
panelToast.open({
  title: 'Success',
  details: 'You have 1 new message.',
  icon: 'spark-icon-check',
  type: 'positive',
  actionLabel: '',
  actionIcon: ''
});

Toasts with a Header

<header class="spark-header" data-toast="header">
  <nav class="spark-header__nav" role="navigation">
    <button class="spark-menu__toggle spark-header__toggle" title="View Navigation">
      <i class="spark-icon--fill spark-icon-menu-hamburger spark-icon--md"></i>
    </button>
    <span class="spark-header__logo"><i class="spark-logo spark-logo--sabre spark-logo--sm">Sabre</i></span>
    <a href="#" class="spark-header__title">Product™</a>
    <div class="spark-menu spark-header__menu" role="menu">
      <div class="spark-menu__header">
        <button class="spark-menu__toggle" title="Hide Navigation">
          <i class="spark-icon--fill spark-icon-close"></i>
        </button>
        <span class="spark-menu__title"></span>
      </div>
      <ul class="spark-menu__list spark-header__list spark-header__list--overflow">
        <li class="spark-menu__list-item" role="menuitem">
          <a href="#" class="spark-menu__list-link">Dashboard</a>
        </li>
        <li class="spark-menu__list-item active" role="menuitem">
          <a href="#" class="spark-menu__list-link">Flight Analysis</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <span class="spark-menu__list-links">
            <a href="#" class="spark-menu__list-link">Market Analysis</a>
            <button class="spark-menu__list-expand" role="menuitemcheckbox" title="Expand"></button>
          </span>
          <ul class="spark-menu__list">
            <li class="spark-menu__list-item" role="menuitem">
              <a href="#" class="spark-menu__list-link">Menu Option 1</a>
            </li>
            <li class="spark-menu__list-item" role="menuitem">
              <span class="spark-menu__list-links">
                <a href="#" class="spark-menu__list-link">Menu Option 2</a>
                <button class="spark-menu__list-expand" role="menuitemcheckbox" title="Expand"></button>
              </span>
              <ul class="spark-menu__list">
                <li class="spark-menu__list-item" role="menuitem">
                  <a href="#" class="spark-menu__list-link">Sub Nav Item 1</a>
                </li>
                <li class="spark-menu__list-item" role="menuitem">
                  <a href="#" class="spark-menu__list-link">Sub Nav Item 2</a>
                </li>
                <li class="spark-menu__list-item" role="menuitem">
                  <a href="#" class="spark-menu__list-link">Sub Nav Item 3</a>
                </li>
                <li class="spark-menu__list-item" role="menuitem">
                  <a href="#" class="spark-menu__list-link">Sub Nav Item 4 That Has A Really Long Title</a>
                </li>
              </ul>
            </li>
            <li class="spark-menu__list-item" role="menuitem">
              <a href="#" class="spark-menu__list-link">Menu Option 3</a>
            </li>
            <li class="spark-menu__list-item" role="menuitem">
              <a href="#" class="spark-menu__list-link"><i class="spark-icon-announce"></i> Menu Option 4 w/ Icon</a>
            </li>
            <li class="spark-menu__list-item" role="menuitem">
              <a href="#" class="spark-menu__list-link">Menu Option 5 w/ A Really Long Title</a>
            </li>
            <li class="spark-menu__list-item spark-header__list-cta" role="menuitem">
              <a href="#" class="spark-header__list-cta-link">View All Analyses</a>
            </li>
          </ul>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a href="#" class="spark-menu__list-link">Nav Item 8</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a href="#" class="spark-menu__list-link">Nav Item 9</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a href="#" class="spark-menu__list-link">Nav Item 10</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a href="#" class="spark-menu__list-link">Nav Item 11</a>
        </li>
        <li class="spark-menu__list-item" role="menuitem">
          <a href="#" class="spark-menu__list-link">Nav Item 12</a>
        </li>
      </ul>
      <ul class="spark-menu__list">
        <li class="spark-menu__list-item spark-menu__list-item--secondary" role="menuitem">
          <a href="#" class="spark-menu__list-link spark-menu__ignore">
            <i class="spark-icon--fill spark-icon-search spark-icon--md"></i>
            <span class="spark-header__collapsed-show">Search</span>
          </a>
        </li>
        <li class="spark-menu__list-item spark-menu__list-item--secondary" role="menuitem">
          <a href="#" class="spark-menu__list-link spark-menu__ignore">
            <i class="spark-icon--fill spark-icon-cog spark-icon--md"></i>
            <span class="spark-header__collapsed-show">Account Settings</span>
          </a>
        </li>
      </ul>
    </div>
    <div class="spark-header__sign-in spark-popover">
      <a href="#" class="spark-menu__list-link spark-popover__toggle">Sign In</a>
      <form class="spark-popover__content--bottom col-xs-8 col-md-4" role="tooltip" onsubmit="return false;" data-anchor-x="right">
        <a href="#" class="spark-popover__close" title="Close"></a>
        <h4>Account Sign In</h4>
        <label class="spark-input spark-margin-top">
          <input class="spark-input__field" name="username" role="textbox">
          <span class="spark-label">Username</span>
        </label>
        <label class="spark-input">
          <input class="spark-input__field" name="password" type="password" role="textbox">
          <span class="spark-label">Password</span>
        </label>
        <button class="spark-btn spark-btn--md spark-btn--block">Sign In</button>
        <div class="spark-text-center spark-margin-top">
          <button class="spark-btn--link spark-eta">Forgot username or password?</button>
        </div>
        <span class="spark-popover__caret"></span>
      </form>
    </div>
  </nav>
</header>
<main>
  <div class="container">
    <div class="row spark-margin-top--lg">
      <div class="col-xs-12">
        <div class="spark-panel" style="height: 1600px">
          <div class="spark-panel__content">
            <button class="spark-btn spark-btn--md" data-toast="make-toast">Make Toast</button>
          </div>
        </div>
    </div>
  </div>
</main>

<style type="text/css">
  
</style>
// Vanilla JS
// You will want to specify the ElHeader so that it will always appear below the main navigation.
var panelToast = new Spark.Toast(document.querySelector('[data-toast="header"]',{elHeader: document.querySelector('[data-toast="header"] .spark-header__nav')}));
//settings for a positive notification
panelToast.open({
  title: 'Success',
  details: 'You have 1 new message.',
  icon: 'spark-icon-check',
  type: 'positive',
  actionLabel: '',
  actionIcon: ''
});

Toasts in Panels

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

<main class="spark-main--sticky-footer" id="mainContent">
  <div class="container">
    <div class="row spark-margin-bottom--lg spark-margin-top--lg">
      <div class="col-xs-12 col-lg-4 spark-hidden--lte-md">
        <div class="row spark-mar-t-0 spark-mar-l-0 spark-mar-r-0 spark-mar-b-2 spark-pad-0">
          <div class="spark-panel spark-pad-2" data-toast="filter">
            <div class="row">
              <div class="col-lg-12">
                <h3>Side Panel</h3>
              </div>
            </div>
            <h4>Panel Headline</h4>
            <fieldset class="row spark-mar-b-1">
              <label class="col-xs-12 spark-checkbox">
                <input class="spark-checkbox__input" type="checkbox" checked="">
                <span class="spark-checkbox__box"></span> <span class="spark-label">Label 1</span>
              </label>
              <label class="col-xs-12 spark-checkbox">
                <input class="spark-checkbox__input" type="checkbox" checked="">
                <span class="spark-checkbox__box"></span> <span class="spark-label">Label 2</span>
              </label>
              <label class="col-xs-12 spark-checkbox">
                <input class="spark-checkbox__input" type="checkbox" checked="">
                <span class="spark-checkbox__box"></span> <span class="spark-label">Label 3</span>
              </label>
              <label class="col-xs-12 spark-checkbox">
                <input class="spark-checkbox__input" type="checkbox" checked="">
                <span class="spark-checkbox__box"></span> <span class="spark-label">Label 4</span>
              </label>
            </fieldset>
            <h4>Panel Headline <span class="spark-thin">(Optional)</span></h4>
            <p class="spark-mar-b-1">Panel headline description.</p>
            <fieldset class="spark-multi-select  spark-mar-b-2" aria-label="Select Options" size="4">
              <fieldset class="spark-multi-select__container spark-pad-1">
              <label class="spark-checkbox">
                <input class="spark-checkbox__input" type="checkbox" checked="">
                <span class="spark-checkbox__box"></span> <span class="spark-label">Program 1</span>
              </label>
              <label class="spark-checkbox">
                <input class="spark-checkbox__input" type="checkbox" checked="">
                <span class="spark-checkbox__box"></span> <span class="spark-label">Program 2</span>
              </label>
              <label class="spark-checkbox">
                <input class="spark-checkbox__input" type="checkbox" checked="">
                <span class="spark-checkbox__box"></span> <span class="spark-label">Program 3</span>
              </label>
              <label class="spark-checkbox">
                <input class="spark-checkbox__input" type="checkbox" checked="">
                <span class="spark-checkbox__box"></span> <span class="spark-label">Program 4</span>
              </label>
                <label class="spark-checkbox">
                <input class="spark-checkbox__input" type="checkbox" checked="">
                <span class="spark-checkbox__box"></span> <span class="spark-label">Program 5</span>
              </label>
              <label class="spark-checkbox">
                <input class="spark-checkbox__input" type="checkbox" checked="">
                <span class="spark-checkbox__box"></span> <span class="spark-label">Program 6</span>
              </label>
              </fieldset>
            </fieldset>
            <h4>Panel Headline <span class="spark-thin">(Optional)</span></h4>
            <div class="spark-range-slider spark-slider--primary spark-mar-b-2">
              <p class="spark-mar-b-1">Panel headline description.</p>
              <input type="number" min="0" max="100" value="0" title="Start">
              <span class="spark-range-slider__input-divider"></span>
              <input type="number" min="0" max="100" value="100" title="End">
              <div class="spark-slider__controls">
                <button class="spark-slider__handle" title="Start" data-value="0" style="left: 3%;"></button>
                <button class="spark-slider__handle" title="End" data-value="100" style="left: 97%;"></button>
                <span class="spark-slider__track"> <span class="spark-slider__track-fill" style="width: 100%; left: 0%;"></span> </span>
              </div>
            </div>
            <button class="spark-btn spark-btn--md spark-btn--block spark-mar-t-2" data-button="filter">Display Toast</button>
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-lg-8">
        <div class="row">
          <div class="col-xs-12">
            <h1>Single Panel Page</h1>
          </div>
          <div class="col-xs-12">
            <div class="spark-panel spark-margin-top" data-toast="panel">
              <div class="spark-panel__content">
                <section>
                  <h2>Panel Heading</h2>
                  <p>
                    Lorem ipsum Aliqua occaecat voluptate qui sint occaecat in laboris amet dolor ea aliquip qui in quis ullamco non commodo est sit laborum aliqua ex do incididunt.
                  </p>
                  <p>
                    Duis elit laborum cupidatat do cillum nulla est culpa elit cillum culpa in culpa velit nisi commodo commodo sit Duis magna irure anim enim nisi mollit sit et enim adipisicing aute sed proident consequat proident ullamco consectetur fugiat dolore culpa deserunt veniam eu magna dolor proident tempor aliqua dolor officia enim.
                  </p>
                </section>
                <hr />
                <section>
                  <h3>Sub-Section</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae perferendis eligendi deserunt optio, voluptatum et amet obcaecati at, earum eos veritatis quaerat ullam ad, quisquam consequuntur velit nihil maxime recusandae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos impedit dolorum rem magnam veniam eligendi, quas deserunt inventore perspiciatis. Veniam non sequi distinctio illum, eum quod vel sunt alias consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ut sed similique deserunt molestias temporibus soluta rem placeat libero et, enim eius repudiandae corporis iusto. Assumenda consectetur nihil, enim libero.</p>
                  <nav class="spark-btn-group spark-margin-top--lg">
                    <div class="spark-btn-group-secondary">
                      <button class="spark-btn spark-btn--md spark-btn--secondary spark-modal__dismiss" data-button='warning'>Warning</button>
                      <button class="spark-btn spark-btn--md spark-btn--secondary" data-button='neutral'>Neutral</button>
                    </div>
                    <button class="spark-btn spark-btn--md spark-btn-group-primary" data-button='success'>Success</button>
                  </nav>
                </section>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>
  <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>

<style type="text/css">
  .white-bg {
    background-color: #ffffff;
  }
</style>

<style type="text/css">
  
</style>
// Vanilla JS
// these toasts will appear at the top level of the panel covering any headers that may be there.
var panelToast = new Spark.Toast(document.querySelector('[data-toast="panel"]'));
//settings for a positive notification
panelToast.open({
  title: 'Success',
  details: 'You have clicked the Success button',
  icon: 'spark-icon-check',
  type: 'positive',
  actionLabel: 'DISMISS',
  actionIcon: ''
});

Toasts in Tabbed Panels

<div class="spark-content__wrapper--sticky-footer">
  <main class="spark-main--sticky-footer" id="mainContent">
    <div class="container">
      <div class="row spark-margin-bottom--lg spark-margin-top--lg">
        <div class="col-xs-12">
          <h1>Sample Toast with Tab Panel</h1>
        </div>
        <div class="col-xs-12">
          <div class="spark-tabs" data-toast="tabs">
            <nav class="spark-tabs__nav" role="menubar">
              <div class="spark-tabs__scroll">
                <ul class="spark-tabs__list" role="tablist">
                  <li class="spark-tabs__tab active" role="tab"><a href="#">Flight Reservations</a></li>
                  <li class="spark-tabs__tab" role="tab"><a href="#">Flight Reservations Condensed</a></li>
                  <li class="spark-tabs__tab" role="tab"><i class="spark-icon-pictures"></i><a href="#">Animal Pictures</a></li>
                </ul>
              </div>
              <div class="spark-tabs__btns">
                <button aria-label="Scroll Tabs to the beginning" class="spark-tabs__btn spark-icon-arrow-chevron-left spark-tabs__btn--left"></button>
                <button aria-label="Scroll Tabs to the end" class="spark-tabs__btn spark-icon-arrow-chevron-right spark-tabs__btn--right"></button>
              </div>
            </nav>
            <div class="spark-tabs__panels white-bg">
              <div role="tabpanel" class="spark-tabs__panel">
                <div class="row">
                  <div class="col-xs-12">
                    <section class="spark-table">
                      <header class="spark-table__header">
                        <h3 class="spark-table__title">
                          Flight Reservations
                        </h3>
                      </header>
                      <div class="spark-table__scroll">
                        <table role="grid">
                          <thead>
                            <tr>
                              <th class="spark-table__select-all">
                                <label class="spark-checkbox">
                                  <input type="checkbox" class="spark-checkbox__input">
                                  <span class="spark-checkbox__box"></span>
                                </label>
                              </th>
                              <th class="spark-text-center">
                                Icon
                              </th>
                              <th>
                                Flight No.
                              </th>
                              <th>
                                Departure <span class="spark-hidden--lte-md">Time</span>
                              </th>
                              <th>
                                Arrival <span class="spark-hidden--lte-md">Time</span>
                              </th>
                              <th class="spark-text-center">
                                Actions
                              </th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td>
                                <label class="spark-checkbox">
                                  <input type="checkbox" class="spark-checkbox__input">
                                  <span class="spark-checkbox__box"></span>
                                </label>
                              </td>
                              <td class="spark-text-center">
                                <i class="spark-icon-airplane spark-icon--md"></i>
                              </td>
                              <td>
                                DL0431
                              </td>
                              <td>
                                <time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
                              </td>
                              <td>
                                <time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
                              </td>
                              <td class="spark-table__actions spark-text-center">
                                <button class="spark-btn spark-btn--sm spark-btn--secondary">Book Flight</button>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <label class="spark-checkbox">
                                  <input type="checkbox" class="spark-checkbox__input">
                                  <span class="spark-checkbox__box"></span>
                                </label>
                              </td>
                              <td class="spark-text-center">
                                <i class="spark-icon-airplane spark-icon--md"></i>
                              </td>
                              <td>
                                DL0431
                              </td>
                              <td>
                                <time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
                              </td>
                              <td>
                                <time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
                              </td>
                              <td class="spark-table__actions spark-text-center">
                                <button class="spark-btn spark-btn--sm spark-btn--secondary">Book Flight</button>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <label class="spark-checkbox">
                                  <input type="checkbox" class="spark-checkbox__input">
                                  <span class="spark-checkbox__box"></span>
                                </label>
                              </td>
                              <td class="spark-text-center">
                                <i class="spark-icon-airplane spark-icon--md"></i>
                              </td>
                              <td>
                                DL0431
                              </td>
                              <td>
                                <time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
                              </td>
                              <td>
                                <time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
                              </td>
                              <td class="spark-table__actions spark-text-center">
                                <button class="spark-btn spark-btn--sm spark-btn--secondary">Book Flight</button>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <label class="spark-checkbox">
                                  <input type="checkbox" class="spark-checkbox__input">
                                  <span class="spark-checkbox__box"></span>
                                </label>
                              </td>
                              <td class="spark-text-center">
                                <i class="spark-icon-airplane spark-icon--md"></i>
                              </td>
                              <td>
                                DL0431
                              </td>
                              <td>
                                <time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
                              </td>
                              <td>
                                <time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
                              </td>
                              <td class="spark-table__actions spark-text-center">
                                <button class="spark-btn spark-btn--sm spark-btn--secondary">Book Flight</button>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <label class="spark-checkbox">
                                  <input type="checkbox" class="spark-checkbox__input">
                                  <span class="spark-checkbox__box"></span>
                                </label>
                              </td>
                              <td class="spark-text-center">
                                <i class="spark-icon-airplane spark-icon--md"></i>
                              </td>
                              <td>
                                AA1321
                              </td>
                              <td>
                                <time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
                              </td>
                              <td>
                                <time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
                              </td>
                              <td class="spark-table__actions spark-text-center">
                                <button class="spark-btn spark-btn--sm spark-btn--secondary">Book Flight</button>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </section>
                    <nav class="spark-btn-group spark-margin-top--lg spark-margin-bottom">
                      <div class="spark-btn-group-secondary">
                        <button class="spark-btn spark-btn--md spark-btn--secondary spark-modal__dismiss">Tertiary</button>
                        <button class="spark-btn spark-btn--md spark-btn--secondary" onclick="return false;">Secondary</button>
                      </div>
                      <button class="spark-btn spark-btn--md spark-btn-group-primary" onclick="return false;">Primary</button>
                    </nav>
                  </div>
                </div>
              </div>
              <div role="tabpanel" class="spark-tabs__panel">
                <div class="row">
                  <div class="col-xs-12">
                    <section class="spark-table spark-table--condensed">
                      <header class="spark-table__header">
                        <h3 class="spark-table__title">
                          Flight Reservations Condensed
                        </h3>
                      </header>
                      <div class="spark-table__scroll">
                        <table role="grid">
                          <thead>
                            <tr>
                              <th class="spark-table__select-all">
                                <label class="spark-checkbox">
                                  <input type="checkbox" class="spark-checkbox__input">
                                  <span class="spark-checkbox__box"></span>
                                </label>
                              </th>
                              <th class="spark-text-center">
                                Icon
                              </th>
                              <th>
                                Flight No.
                              </th>
                              <th>
                                Departure <span class="spark-hidden--lte-md">Time</span>
                              </th>
                              <th>
                                Arrival <span class="spark-hidden--lte-md">Time</span>
                              </th>
                              <th class="spark-text-center">
                                Actions
                              </th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td>
                                <label class="spark-checkbox">
                                  <input type="checkbox" class="spark-checkbox__input">
                                  <span class="spark-checkbox__box"></span>
                                </label>
                              </td>
                              <td class="spark-text-center">
                                <i class="spark-icon-airplane spark-icon"></i>
                              </td>
                              <td>
                                DL0431
                              </td>
                              <td>
                                <time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
                              </td>
                              <td>
                                <time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
                              </td>
                              <td class="spark-table__actions spark-text-center">
                                <button class="spark-btn spark-btn--xs spark-btn--secondary">Book Flight</button>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <label class="spark-checkbox">
                                  <input type="checkbox" class="spark-checkbox__input">
                                  <span class="spark-checkbox__box"></span>
                                </label>
                              </td>
                              <td class="spark-text-center">
                                <i class="spark-icon-airplane spark-icon"></i>
                              </td>
                              <td>
                                DL0431
                              </td>
                              <td>
                                <time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
                              </td>
                              <td>
                                <time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
                              </td>
                              <td class="spark-table__actions spark-text-center">
                                <button class="spark-btn spark-btn--xs spark-btn--secondary">Book Flight</button>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <label class="spark-checkbox">
                                  <input type="checkbox" class="spark-checkbox__input">
                                  <span class="spark-checkbox__box"></span>
                                </label>
                              </td>
                              <td class="spark-text-center">
                                <i class="spark-icon-airplane spark-icon"></i>
                              </td>
                              <td>
                                DL0431
                              </td>
                              <td>
                                <time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
                              </td>
                              <td>
                                <time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
                              </td>
                              <td class="spark-table__actions spark-text-center">
                                <button class="spark-btn spark-btn--xs spark-btn--secondary">Book Flight</button>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <label class="spark-checkbox">
                                  <input type="checkbox" class="spark-checkbox__input">
                                  <span class="spark-checkbox__box"></span>
                                </label>
                              </td>
                              <td class="spark-text-center">
                                <i class="spark-icon-airplane spark-icon"></i>
                              </td>
                              <td>
                                DL0431
                              </td>
                              <td>
                                <time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
                              </td>
                              <td>
                                <time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
                              </td>
                              <td class="spark-table__actions spark-text-center">
                                <button class="spark-btn spark-btn--xs spark-btn--secondary">Book Flight</button>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <label class="spark-checkbox">
                                  <input type="checkbox" class="spark-checkbox__input">
                                  <span class="spark-checkbox__box"></span>
                                </label>
                              </td>
                              <td class="spark-text-center">
                                <i class="spark-icon-airplane spark-icon"></i>
                              </td>
                              <td>
                                AA1321
                              </td>
                              <td>
                                <time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
                              </td>
                              <td>
                                <time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
                              </td>
                              <td class="spark-table__actions spark-text-center">
                                <button class="spark-btn spark-btn--xs spark-btn--secondary">Book Flight</button>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </section>
                    <nav class="spark-btn-group spark-margin-top--lg spark-margin-bottom">
                      <div class="spark-btn-group-secondary">
                        <button class="spark-btn spark-btn--sm spark-btn--secondary spark-modal__dismiss">Tertiary</button>
                        <button class="spark-btn spark-btn--sm spark-btn--secondary" onclick="return false;">Secondary</button>
                      </div>
                      <button class="spark-btn spark-btn--sm spark-btn-group-primary" onclick="return false;">Primary</button>
                    </nav>
                  </div>
                </div>
              </div>
              <div role="tabpanel" class="spark-tabs__panel">
                <div class="row">
                  <div class="col-xs-12 col-sm-4 spark-margin-bottom">
                    <img src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/tabs/w4Fyi0G.jpg" style="width: 100%;">
                  </div>
                  <div class="col-xs-12 col-sm-4 spark-margin-bottom">
                    <img src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/tabs/igftzhH.jpg" style="width: 100%;">
                  </div>
                  <div class="col-xs-12 col-sm-4 spark-margin-bottom">
                    <img src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/tabs/xgXvcQN.jpg" style="width: 100%;">
                  </div>
                </div>
                <div class="row">
                  <div class="col-xs-12">
                    <p>
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

  <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>

<style type="text/css">
  .white-bg {
    background-color: #ffffff;
  }
</style>

<style type="text/css">
  
</style>
// Vanilla JS
// these toasts will appear at the top level of tabbed panel, it will appear below the tabs, but over the tabbed content
var panelToast = var toast = new Spark.Toast(document.querySelector('[data-toast="tabs"]'), {
  elHeader: document.querySelector('[data-toast="tabs"] .spark-tabs__nav')
});
//settings for a positive notification
panelToast.open({
  title: 'Success',
  details: 'You have clicked the Success button',
  icon: 'spark-icon-check',
  type: 'positive',
  actionLabel: 'DISMISS',
  actionIcon: ''
});

Accessibility Notes

As defined earlier, the Toast notifications are best used for non-critical messages intended to interrupt the user from a task with an important update (to make the user aware, even though no action is needed). To make them fully accessible, the examples have been enhanced as follows:

For static (non-actionable) toast notifications.

  • A role="alert" attribute has been added to the base toast element. When an element is attached to the DOM with this attribute, screen readers should automatically announce the alert. Screen readers focus should be moved to the control inside the notification and announce the notifications

For actionable toast notifications.

  • A role="alertdialog" attribute has been added to the base toast element. When an element is attached to the DOM with this attribute, screen readers should automatically announce the alert.

  • An aria-labelledby and aria-describedby are also added to these notifications. This allows screen readers to announce the notifications accessible role, name and description before announcing the focused button.

  • If an actionIcon is set for the toast notification and an actionLabel is also available, then the action button will have an aria-label attributed added to the button to better describe the buttons action.

Time Considerations

Toast notifications should be displayed for a minimum of 3 seconds. A good rule of thumb is 3 seconds + 60ms for each letter. This allows enough time for the message to be read and comprehended.