Panels

Panels are a type of container that provide a means of grouping and arranging sections of content in a visually pleasing manner. Panels may contain a variety of content (images, text, tables, forms, etc.) and can be implemented in a variety of layouts to accommodate the needs of different application and screen types.

Available in React

Standard Panel Example
- When to Use
- When Not to Use
Examples
Usage and Display
Examples
Developer Notes
Accessibility Notes

Standard Panel Example

Panel heading

Donec tincidunt vitae magna non ultricies. Maecenas sed mauris imperdiet, rhoncus mauris eget, eleifend ex. Donec turpis enim, interdum et ullamcorper nec, hendrerit eget libero. Maecenas dictum laoreet venenatis. Nulla nulla velit, semper et hendrerit vitae, gravida a tortor. In sed iaculis velit. Mauris dignissim maximus neque non luctus.

When to Use

Use a panel to group and arrange content that does not appear in another type of container, such as a table or tabbed set.
A panel may also be used for organizing small and/or unevenly sized tables on a screen to provide a more organized and harmonious layout.

When Not to Use

It is not necessary to display large tables and tabbed sets inside of a panel.

Examples

Standard Panel (shown above)
Expand/Collapse Panel
Image Panel
Nested Panel
Top & Bottom Fixed Panels
Side Fixed Panels

Usage and Display

Panel headings may appear inside or outside of the panel, except when using expand/collapse panels, which always display the heading inside of the panel.
Panels should have a 4-pixel corner radius.
Include 24 pixels of padding within the panels.
When a sequence of panels appear in a side-by-side arrangement, make sure that they have consistent heights.
Align panels to the grid.

Examples

Expand/Collapse Panel

Use an expand/collapse panel to allow expand/collapse functionality of an entire panel.

See Expand/Collapse for details.

Image Panel Example

This may be used when images are used to distinguish blocks of content on a page.

Amazing Deal

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.

Nested Panel Example

When nesting panels you may replace the box-shadow with a single stroke to denote the content area, while also preserving the visual hierarchy.

Amazing Deal

Top & Bottom Fixed Panels

These panels may be used when content needs to persist on the screen, and they may be docked to the top or bottom, or sides of the viewport. Refer to the Developer Tab for a list of available configurations and associated behaviors.

Content inside of the Fixed Panel can vary. See the Transaction Summary Bar and Side Fixed Panel design samples for content examples and layout guidance.

Top Fixed Panel

The Top Fixed Panel appears below the header and remains fixed as the user scrolls.

Open in New Tab

Top Fixed Panel with Scroll Behavior

The Top Fixed Panel with Scroll Behavior is fixed initially, but disappears when scrolling toward the bottom of the page and reappears when scrolling toward the top of the page.

Open in New Tab

Top Fixed Panel with Hide at Element Behavior

The Fixed Panel is initially fixed but slides out of view once the page has been scrolled to a point where the Panel is next to a specified element on the page. The Panel will reappear when scrolling back to the top of the page if the specified element has been passed.

For this to work correctly, the page needs to be scrollable to where the Fixed Panel is at the desired hiding point.

Open in New Tab

Bottom Fixed Panel

The Bottom Fixed Panel is recommended for persistent access to primary call-to-action buttons. We recommend not using a footer with the Bottom Fixed Panel.

Open in New Tab

Side Fixed Panels

Side Fixed Panel with Cover and Underlay

This Fixed Panel can appear on the left or right side of the viewport, and it overlaps the main content. The control for accessing the Side Fixed Panel should be positioned on the same side as the Side Fixed Panel itself. Additionally, this variation may include an underlay to subdue the main content and place focus on the Side Fixed Panel.

Open in New Tab

Side Fixed Panel with Cover

Open in New Tab

Additional Guidelines

Consider keeping the contents within a top or bottom Fixed Panel at a minimum to reduce the amount of screen real-estate taken up, particularly on smaller devices.
Fixed Panels should not be used (exclusively) to display messages, however, it’s important to note that messages, including Toast Notifications can appear within Fixed Panels.
When using a Side Fixed Panel in addition to top and bottom Fixed Panels, the top and bottom panels take priority, with the side panel(s) lying underneath.
Regarding Side Fixed Panels, keep any controls within close proximity to the panel, demonstrating best practices.
Consider limiting the total amount of Fixed Panels displayed within a single screen. For example, avoid using two top Fixed Panels together.

Developer Notes

A panel is created by adding the spark-panel class to an element. These cards are best sized using the responsive grid. The content for the panel should be placed inside of an element with a class of spark-panel__content. Optionally, a header can be defined using the spark-panel__header element. If a Panel component is nested within another Panel component, you may add the class spark-nested to the spark-panel element to replace the box-shadow with a border.

For a panel with a masthead image at the top, wrap imagery in an element with a class of spark-panel__masthead.

Standard Panel

Panel heading

<div class="spark-panel spark-panel--card col-xs-12 col-sm-6">
  <div class="spark-panel__content spark-expand">
    <h3>
      Panel heading
    </h3>
    <p>
      Donec tincidunt vitae magna non ultricies. Maecenas sed mauris imperdiet, rhoncus mauris eget, eleifend ex. Donec turpis enim, interdum et ullamcorper nec, hendrerit eget libero. Maecenas dictum laoreet venenatis. Nulla nulla velit, semper et hendrerit vitae, gravida a tortor. In sed iaculis velit. Mauris dignissim maximus neque non luctus.
    </p>
    <p id="panel__content" class="spark-expand__content" aria-hidden="true">
      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>
    <button class="spark-btn spark-btn--text spark-expand__toggle spark-expand__hide--expanded" aria-expanded="false" aria-hidden="false" aria-controls="panel__content">View More<span class="spark-expand__toggle-caret"></span></button>
    <button class="spark-btn spark-btn--text spark-expand__toggle spark-expand__show--expanded" aria-expanded="true" aria-hidden="true" aria-controls="panel__content">View Less<span class="spark-expand__toggle-caret"></span></button>
  </div>
</div>

<style type="text/css">
  
</style>

// Vanilla JS
var el = document.querySelector('.spark-expand');
var expandInstance = new Spark.Expand(el);

Expand/Collapse Panel

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.

<div class="spark-panel spark-panel--expand col-xs-12">
  <div class="spark-panel__header" role="heading" tabindex="0" aria-expanded="false" aria-controls="panel--expand-collapse_content">
    <h4>Panel Heading</h4>
  </div>
  <div id="panel--expand-collapse_content" aria-hidden="true" class="spark-panel__content">
    <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>
  </div>
</div>

<style type="text/css">
  
</style>

// Vanilla JS
var el = document.querySelector('.spark-panel--expand');
var expandInstance = new Spark.Expand(el);

Image Heading Panel

Amazing Deal

<div class="spark-panel spark-panel--card col-xs-12 col-sm-6">
  <div class="spark-panel__masthead">
    <img src="https://sabre-spark.s3.amazonaws.com/site_assets/design_assets/panel-image-stockholm.jpg" alt="">
    <span class="spark-numerals spark-alt">$289</span>
  </div>
  <div class="spark-panel__content">
    <h3>Amazing Deal</h3>
    <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>
    <button class="spark-btn spark-btn--text">Claim This Deal</button>
  </div>
</div>


<style type="text/css">
  
</style>

// Vanilla JS
var el = document.querySelector('.spark-expand');
var expandInstance = new Spark.Expand(el);

Top & Bottom Fixed Panels

The Default Fixed Panel can be accessed by adding the spark-panel--fixed to the element thus fixing the panel to the top of the viewport on scroll.

The following options may be passed when using new Spark.FixedPanel(el, {});:

Name	Type	Default	Description
hideOnScroll	boolean	false	Hides the Fixed Panel when a user scrolls. If not passed the component will check for the value of the `data-hide-on-scroll` attribute.
fixToBottom	boolean	false	Docks the Fixed Panel to the bottom of the Viewport. If not passed the component will check for the value of the `data-fixed-to-bottom` attribute.
unlockBreakPoint	string	null	Sets breakpoint, at which the Fixed Panel is docked. Should be one of xs, sm, md, or lg. If not passed the component will check for the `data-breakpoint` attribute.
condenseOnScroll	boolean	false	Applies the `spark-panel--condensed` class once the scroll position exceeds the height of the Header and Panel. This class can then be used to add additional condensed styling to the contents of the Fixed Panel e.g. reducing font-sizes, margins or padding. If not passed this component will check for the `data-condense` attribute.
headerEl	Element	null	The Header element to be used if it is not a Spark Header. This needs to be an Element object returned via the querySelector() method or similar. If using a Spark Header, this does not need to be supplied.
scrolledToEl	Element	null	A single element that is used determine at which the point at which the Fixed Panel will be hidden or displayed.
customCondenseClass	string	null	A custom condense class that is applied to the component on scroll in place of the `spark-panel--condensed`

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

Top Fixed Panel

Open in New Tab

<a class="spark-skip-nav" href="#mainContent">Skip Navigation</a>

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

  <header class="spark-header">
    <nav class="spark-header__nav" role="navigation">
      <button class="spark-menu__toggle spark-header__toggle" aria-label="View Navigation" 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" aria-label="Hide Navigation" 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">
            <span class="spark-menu__list-links">
              <a href="#" class="spark-menu__list-link">Flight Analysis</a>
              <button class="spark-menu__list-expand" role="menuitemcheckbox" aria-label="Expand or Collapse Menu" title="Expand"></button>
            </span>
            <ul class="spark-menu__list">
              <li class="spark-menu__list-item" role="menuitem">
                <a tabindex="0" class="spark-menu__list-link">First Level A</a>
              </li>
              <li class="spark-menu__list-item" role="menuitem">
                <span class="spark-menu__list-links">
                  <a tabindex="0" class="spark-menu__list-link">First Level B</a>
                  <a tabindex="0" class="spark-menu__list-expand" role="menuitemcheckbox" title="Expand"></a>
                </span>
                <ul class="spark-menu__list">
                  <li class="spark-menu__list-item" role="menuitem">
                    <a tabindex="0" class="spark-menu__list-link">Second Level a</a>
                  </li>
                  <li class="spark-menu__list-item" role="menuitem">
                    <span class="spark-menu__list-links">
                      <a tabindex="0" class="spark-menu__list-link spark-menu__list-expand" role="menuitemcheckbox">Second Level b</a>
                    </span>
                    <ul class="spark-menu__list">
                      <li class="spark-menu__list-item" role="menuitem">
                        <a tabindex="0" class="spark-menu__list-link">Third-level Item I</a>
                      </li>
                      <li class="spark-menu__list-item" role="menuitem">
                        <a tabindex="0" class="spark-menu__list-link">Third-level Item II</a>
                      </li>
                      <li class="spark-menu__list-item" role="menuitem">
                        <a tabindex="0" class="spark-menu__list-link">Third-level Item III</a>
                      </li>
                      <li class="spark-menu__list-item" role="menuitem">
                        <a tabindex="0" class="spark-menu__list-link">Third-level Item IV</a>
                      </li>
                    </ul>
                  </li>
                  <li class="spark-menu__list-item" role="menuitem">
                    <a tabindex="0" class="spark-menu__list-link">Second Level c</a>
                  </li>
                  <li class="spark-menu__list-item" role="menuitem">
                    <a tabindex="0" class="spark-menu__list-link">Second Level d</a>
                  </li>
                </ul>
              </li>
              <li class="spark-menu__list-item active" role="menuitem">
                <a tabindex="0" class="spark-menu__list-link">Sample Single Panel Form Page</a>
              </li>
              <li class="spark-menu__list-item" role="menuitem">
                <a tabindex="0" class="spark-menu__list-link spark-menu__list-expand" role="menuitemcheckbox">First Level D</a>
                <ul class="spark-menu__list">
                  <li class="spark-menu__list-item" role="menuitem">
                    <a tabindex="0" class="spark-menu__list-link">Second Level aa</a>
                  </li>
                  <li class="spark-menu__list-item" role="menuitem">
                    <a tabindex="0" class="spark-menu__list-link">Second Level bb</a>
                  </li>
                  <li class="spark-menu__list-item" role="menuitem">
                    <a tabindex="0" class="spark-menu__list-link">Second Level cc</a>
                  </li>
                </ul>
              </li>
            </ul>
          </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" aria-label="Expand or Collapse Menu" 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" aria-label="Expand or Collapse Menu" 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 aria-hidden="true" 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-header__list-cta">
                <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" aria-label="Search">
              <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" aria-label="Account Settings">
              <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-mar-t-1">
            <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-mar-t-1">
            <a href="#example-link" class="spark-link spark-zeta">Forgot username or password?</a>
          </div>
          <span class="spark-popover__caret"></span>
        </form>
      </div>
    </nav>
  </header>

  <div class="spark-panel--fixed">
    <div class="summary-bar">
      <div class="row">
        <div class="col-xs-6 summary-bar--pod">
          <div class="spark-align-items-center spark-flex">
              <span aria-hidden="true" class="spark-icon spark-icon-airplane spark-icon--lg spark-mar-r-2 spark-hidden--xs"></span>

              <div>
                <div class="spark-flex spark-align-items-center">
                  <span class="summary-label">DFW</span>
                  <span aria-label="to" class="spark-icon spark-icon-arrow-basic-right"></span>
                  <span class="summary-label">SFO</span>
                </div>

                <span class="summary-detail spark-block spark-mar-t-.5--gte-sm">Sep 23 &ndash; 30, Roundtrip</span>
              </div>
          </div>
        </div>

        <div class="col-xs-6 summary-bar--pod spark-flex spark-align-items-center flex-items-xs-right">
          <div>
            <span>1,230.23</span> USD
          </div>
        </div>
      </div>
    </div>
  </div>

  <main class="spark-main--sticky-footer" id="mainContent">
    <div class="container">
      <div class="row spark-mar-b-2 spark-mar-t-2">
        <div class="col-xs-12">
          <h1>Page Title</h1>
        </div>

        <section class="spark-table spark-table--condensed col-xs-12">
          <header class="spark-table__header">
            <h4 class="spark-table__title">
              Table Title
            </h4>
          </header>
          <div class="spark-table__scroll">
            <table role="grid">
              <thead>
                <tr>
                  <td class="spark-table__select-all spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select all rows</span>
                    </label>
                  </td>
                  <th class="spark-text-center">
                    Icon
                  </th>
                  <th data-sort="asc" tabindex="0">
                    Flight <span aria-label="Number">No.</span>
                  </th>
                  <th data-sort tabindex="0">
                    Departure <span class="spark-hidden--lte-md">Time</span>
                  </th>
                  <th data-sort tabindex="0">
                    Arrival <span class="spark-hidden--lte-md">Time</span>
                  </th>
                  <th class="spark-text-center">
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>

      </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" aria-label="Twitter" 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" aria-label="Facebook" 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" aria-label="LinkedIn" 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" aria-label="Instagram" 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" aria-label="YouTube" 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">
  
.summary-bar {
  background: #fff;
  padding: 1rem;
}

@media (min-width: 544px) {
  .summary-bar {
    padding: 1rem 2rem;
  }
}

.summary-bar--pod:last-child {
  color: #121315;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.33333333rem;
  font-weight: 400;
  line-height: 1;
}

@media (min-width: 544px) {
  .summary-bar--pod:last-child {
    font-size: 2.58333333rem;
  }
}

.summary-bar--pod:last-child span:first-child {
  font-weight: 700;
}

.summary-label {
  color: #2E3034;
  display: block;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.66666667rem;
  font-weight: 700;
  line-height: 2.0833333rem;
}

@media (min-width: 544px) {
  .summary-label {
    font-size: 2.0833333rem;
  }
}

.summary-detail {
  color: #404247;
  font-size: 1.08333333rem;
  line-height: 1.33333333rem;
}

@media (min-width: 544px) {
  .summary-detail {
    font-size: 1.33333333rem;
  }
}

.spark-icon-airplane,
.spark-icon-arrow-basic-right,
.summary-bar .spark-icon-airplane,
.summary-bar .spark-icon-arrow-basic-right {
  color: #121315;
}

.spark-icon-arrow-basic-right,
.summary-bar .spark-icon-arrow-basic-right {
  line-height: 2.08333333rem;
  margin: 0 1rem;
}

@media (max-width: 543px) {
  .spark-icon-arrow-basic-right,
  .summary-bar .spark-icon-arrow-basic-right {
    font-size: 1.08333333rem;
    line-height: 1;
    margin: 0 0.5rem;
  }
}


</style>

// Vanilla JS
var el = document.querySelector('.spark-panel--fixed');
var fixedPanel = new Spark.FixedPanel(el);

Top Fixed Panel with Scroll Behavior

Open in New Tab

<a class="spark-skip-nav" href="#mainContent">Skip Navigation</a>

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

  <header class="spark-header">
    <nav class="spark-header__nav" role="navigation">
      <button class="spark-menu__toggle spark-header__toggle" aria-label="View Navigation" 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" aria-label="Hide Navigation" 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">
            <span class="spark-menu__list-links">
              <a href="#" class="spark-menu__list-link">Flight Analysis</a>
              <button class="spark-menu__list-expand" role="menuitemcheckbox" aria-label="Expand or Collapse Menu" title="Expand"></button>
            </span>
            <ul class="spark-menu__list">
              <li class="spark-menu__list-item" role="menuitem">
                <a tabindex="0" class="spark-menu__list-link">First Level A</a>
              </li>
              <li class="spark-menu__list-item" role="menuitem">
                <span class="spark-menu__list-links">
                  <a tabindex="0" class="spark-menu__list-link">First Level B</a>
                  <a tabindex="0" class="spark-menu__list-expand" role="menuitemcheckbox" title="Expand"></a>
                </span>
                <ul class="spark-menu__list">
                  <li class="spark-menu__list-item" role="menuitem">
                    <a tabindex="0" class="spark-menu__list-link">Second Level a</a>
                  </li>
                  <li class="spark-menu__list-item" role="menuitem">
                    <span class="spark-menu__list-links">
                      <a tabindex="0" class="spark-menu__list-link spark-menu__list-expand" role="menuitemcheckbox">Second Level b</a>
                    </span>
                    <ul class="spark-menu__list">
                      <li class="spark-menu__list-item" role="menuitem">
                        <a tabindex="0" class="spark-menu__list-link">Third-level Item I</a>
                      </li>
                      <li class="spark-menu__list-item" role="menuitem">
                        <a tabindex="0" class="spark-menu__list-link">Third-level Item II</a>
                      </li>
                      <li class="spark-menu__list-item" role="menuitem">
                        <a tabindex="0" class="spark-menu__list-link">Third-level Item III</a>
                      </li>
                      <li class="spark-menu__list-item" role="menuitem">
                        <a tabindex="0" class="spark-menu__list-link">Third-level Item IV</a>
                      </li>
                    </ul>
                  </li>
                  <li class="spark-menu__list-item" role="menuitem">
                    <a tabindex="0" class="spark-menu__list-link">Second Level c</a>
                  </li>
                  <li class="spark-menu__list-item" role="menuitem">
                    <a tabindex="0" class="spark-menu__list-link">Second Level d</a>
                  </li>
                </ul>
              </li>
              <li class="spark-menu__list-item active" role="menuitem">
                <a tabindex="0" class="spark-menu__list-link">Sample Single Panel Form Page</a>
              </li>
              <li class="spark-menu__list-item" role="menuitem">
                <a tabindex="0" class="spark-menu__list-link spark-menu__list-expand" role="menuitemcheckbox">First Level D</a>
                <ul class="spark-menu__list">
                  <li class="spark-menu__list-item" role="menuitem">
                    <a tabindex="0" class="spark-menu__list-link">Second Level aa</a>
                  </li>
                  <li class="spark-menu__list-item" role="menuitem">
                    <a tabindex="0" class="spark-menu__list-link">Second Level bb</a>
                  </li>
                  <li class="spark-menu__list-item" role="menuitem">
                    <a tabindex="0" class="spark-menu__list-link">Second Level cc</a>
                  </li>
                </ul>
              </li>
            </ul>
          </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" aria-label="Expand or Collapse Menu" 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" aria-label="Expand or Collapse Menu" 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 aria-hidden="true" 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-header__list-cta">
                <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" aria-label="Search">
              <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" aria-label="Account Settings">
              <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-mar-t-1">
            <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-mar-t-1">
            <a href="#example-link" class="spark-link spark-zeta">Forgot username or password?</a>
          </div>
          <span class="spark-popover__caret"></span>
        </form>
      </div>
    </nav>
  </header>

  <div class="spark-panel--fixed" data-hide-on-scroll>
    <div class="summary-bar">
      <div class="row">
        <div class="col-xs-6 summary-bar--pod">
          <div class="spark-align-items-center spark-flex">
              <span aria-hidden="true" class="spark-icon spark-icon-airplane spark-icon--lg spark-mar-r-2 spark-hidden--xs"></span>

              <div>
                <div class="spark-flex spark-align-items-center">
                  <span class="summary-label">DFW</span>
                  <span aria-label="to" class="spark-icon spark-icon-arrow-basic-right"></span>
                  <span class="summary-label">SFO</span>
                </div>

                <span class="summary-detail spark-block spark-mar-t-.5--gte-sm">Sep 23 &ndash; 30, Roundtrip</span>
              </div>
          </div>
        </div>

        <div class="col-xs-6 summary-bar--pod spark-flex spark-align-items-center flex-items-xs-right">
          <div>
            <span>1,230.23</span> USD
          </div>
        </div>
      </div>
    </div>
  </div>

  <main class="spark-main--sticky-footer" id="mainContent">
    <div class="container">
      <div class="row spark-mar-b-2 spark-mar-t-2">
        <div class="col-xs-12">
          <h1>Page Title</h1>
        </div>

        <section class="spark-table spark-table--condensed col-xs-12">
          <header class="spark-table__header">
            <h4 class="spark-table__title">
              Table Title
            </h4>
          </header>
          <div class="spark-table__scroll">
            <table role="grid">
              <thead>
                <tr>
                  <td class="spark-table__select-all spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select all rows</span>
                    </label>
                  </td>
                  <th class="spark-text-center">
                    Icon
                  </th>
                  <th data-sort="asc" tabindex="0">
                    Flight <span aria-label="Number">No.</span>
                  </th>
                  <th data-sort tabindex="0">
                    Departure <span class="spark-hidden--lte-md">Time</span>
                  </th>
                  <th data-sort tabindex="0">
                    Arrival <span class="spark-hidden--lte-md">Time</span>
                  </th>
                  <th class="spark-text-center">
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>

      </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" aria-label="Twitter" 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" aria-label="Facebook" 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" aria-label="LinkedIn" 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" aria-label="Instagram" 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" aria-label="YouTube" 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">
  
.summary-bar {
  background: #fff;
  padding: 1rem;
}

@media (min-width: 544px) {
  .summary-bar {
    padding: 1rem 2rem;
  }
}

.summary-bar--pod:last-child {
  color: #121315;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.33333333rem;
  font-weight: 400;
  line-height: 1;
}

@media (min-width: 544px) {
  .summary-bar--pod:last-child {
    font-size: 2.58333333rem;
  }
}

.summary-bar--pod:last-child span:first-child {
  font-weight: 700;
}

.summary-label {
  color: #2E3034;
  display: block;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.66666667rem;
  font-weight: 700;
  line-height: 2.0833333rem;
}

@media (min-width: 544px) {
  .summary-label {
    font-size: 2.0833333rem;
  }
}

.summary-detail {
  color: #404247;
  font-size: 1.08333333rem;
  line-height: 1.33333333rem;
}

@media (min-width: 544px) {
  .summary-detail {
    font-size: 1.33333333rem;
  }
}

.spark-icon-airplane,
.spark-icon-arrow-basic-right,
.summary-bar .spark-icon-airplane,
.summary-bar .spark-icon-arrow-basic-right {
  color: #121315;
}

.spark-icon-arrow-basic-right,
.summary-bar .spark-icon-arrow-basic-right {
  line-height: 2.08333333rem;
  margin: 0 1rem;
}

@media (max-width: 543px) {
  .spark-icon-arrow-basic-right,
  .summary-bar .spark-icon-arrow-basic-right {
    font-size: 1.08333333rem;
    line-height: 1;
    margin: 0 0.5rem;
  }
}


</style>

// Vanilla JS
var el = document.querySelector('.spark-panel--fixed');
var fixedPanel = new Spark.FixedPanel(el);

Top Fixed Panel with Hide at Element Behavior

Open in New Tab

<header class="spark-header">
  <nav class="spark-header__nav" role="navigation">
    <button class="spark-menu__toggle spark-header__toggle" aria-label="View Navigation" 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" aria-label="Hide Navigation" 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" aria-label="Expand or Collapse Menu" 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" aria-label="Expand or Collapse Menu" 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 aria-hidden="true" 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" aria-label="Search">
            <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" aria-label="Account Settings">
            <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-mar-t-1">
          <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-mar-t-1">
          <a href="#example-link" class="spark-link spark-zeta">Forgot username or password?</a>
        </div>
        <span class="spark-popover__caret"></span>
      </form>
    </div>
  </nav>
</header>

<div class="spark-panel--fixed container-fluid">
  <div class="row spark-summary-bar spark-pad-1 spark-pad-r-0--xs spark-pad-l-0--xs">
    <div class="col-xs-6">
      <div class="spark-align-items-center spark-flex">
          <span aria-hidden="true" class="spark-icon spark-icon-airplane spark-icon--lg spark-mar-r-2 spark-hidden--xs"></span>

          <div>
            <div class="spark-flex spark-align-items-center">
              <span class="spark-summary-bar__title">DFW</span>
              <span class="spark-icon spark-icon-arrow-basic-right" aria-label="to"></span>
              <span class="spark-summary-bar__title">SFO</span>
            </div>

            <span class="spark-summary-bar__subtitle spark-block">Sep 23 &ndash; 30, Roundtrip</span>
          </div>
      </div>
    </div>

    <div class="col-xs-6 spark-flex spark-align-items-center flex-items-xs-right">
      <div class="spark-summary-bar__price">
        <span class="spark-summary-bar__amount">1,230.23</span> USD
      </div>
    </div>
  </div>
</div>

<main id="mainContent">
  <div class="container">
    <div class="row spark-mar-b-2 spark-mar-t-2">
      <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-mar-t-1" 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-mar-t-2">
                    <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 class="row" data-example-id="hide-fixed-panel">
          <div class="col-xs-12">
            <div class="spark-panel spark-mar-t-1" data-toast="panel">
              <div class="spark-panel__content">
                <section>
                  <h2>Hide Fixed Panel Here</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-mar-t-2">
                    <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 class="row">
          <div class="col-xs-12">
            <div class="spark-panel spark-mar-t-1" 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-mar-t-2">
                    <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" aria-label="Twitter" 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" aria-label="Facebook" 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" aria-label="LinkedIn" 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" aria-label="Instagram" 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" aria-label="YouTube" title="YouTube">
          <i class="spark-icon-social-youtube spark-icon--fill"></i>
        </a>
      </li>
    </ul>
  </div>
</footer>


<style type="text/css">
  
.summary-bar {
  background: #fff;
  padding: 1rem;
}

@media (min-width: 544px) {
  .summary-bar {
    padding: 1rem 2rem;
  }
}

.summary-bar--pod:last-child {
  color: #121315;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.33333333rem;
  font-weight: 400;
  line-height: 1;
}

@media (min-width: 544px) {
  .summary-bar--pod:last-child {
    font-size: 2.58333333rem;
  }
}

.summary-bar--pod:last-child span:first-child {
  font-weight: 700;
}

.summary-label {
  color: #2E3034;
  display: block;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.66666667rem;
  font-weight: 700;
  line-height: 2.0833333rem;
}

@media (min-width: 544px) {
  .summary-label {
    font-size: 2.0833333rem;
  }
}

.summary-detail {
  color: #404247;
  font-size: 1.08333333rem;
  line-height: 1.33333333rem;
}

@media (min-width: 544px) {
  .summary-detail {
    font-size: 1.33333333rem;
  }
}

.spark-icon-airplane,
.spark-icon-arrow-basic-right,
.summary-bar .spark-icon-airplane,
.summary-bar .spark-icon-arrow-basic-right {
  color: #121315;
}

.spark-icon-arrow-basic-right,
.summary-bar .spark-icon-arrow-basic-right {
  line-height: 2.08333333rem;
  margin: 0 1rem;
}

@media (max-width: 543px) {
  .spark-icon-arrow-basic-right,
  .summary-bar .spark-icon-arrow-basic-right {
    font-size: 1.08333333rem;
    line-height: 1;
    margin: 0 0.5rem;
  }
}


</style>

// Vanilla JS
var fixedPanelEl = document.querySelector('.spark-panel--fixed');
var fixedPanel new Spark.FixedPanel(fixedPanelEl, {
  scrolledToEl: document.querySelector('[data-example-id="hide-fixed-panel"]'),
}

Bottom Fixed Panel

When using the Bottom Fixed Panel, place the markup for the component towards the bottom of your HTML, ideally as close to the closing </body> tag. This will prevent a jump that would be seen as the container is repositioned in the DOM while the page is still loading.

Open in New Tab

<a class="spark-skip-nav" href="#mainContent">Skip Navigation</a>

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

  <header class="spark-header">
    <nav class="spark-header__nav" role="navigation">
      <button class="spark-menu__toggle spark-header__toggle" aria-label="View Navigation" 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" aria-label="Hide Navigation" 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">
            <span class="spark-menu__list-links">
              <a href="#" class="spark-menu__list-link">Flight Analysis</a>
              <button class="spark-menu__list-expand" role="menuitemcheckbox" aria-label="Expand or Collapse Menu" title="Expand"></button>
            </span>
            <ul class="spark-menu__list">
              <li class="spark-menu__list-item" role="menuitem">
                <a tabindex="0" class="spark-menu__list-link">First Level A</a>
              </li>
              <li class="spark-menu__list-item" role="menuitem">
                <span class="spark-menu__list-links">
                  <a tabindex="0" class="spark-menu__list-link">First Level B</a>
                  <a tabindex="0" class="spark-menu__list-expand" role="menuitemcheckbox" title="Expand"></a>
                </span>
                <ul class="spark-menu__list">
                  <li class="spark-menu__list-item" role="menuitem">
                    <a tabindex="0" class="spark-menu__list-link">Second Level a</a>
                  </li>
                  <li class="spark-menu__list-item" role="menuitem">
                    <span class="spark-menu__list-links">
                      <a tabindex="0" class="spark-menu__list-link spark-menu__list-expand" role="menuitemcheckbox">Second Level b</a>
                    </span>
                    <ul class="spark-menu__list">
                      <li class="spark-menu__list-item" role="menuitem">
                        <a tabindex="0" class="spark-menu__list-link">Third-level Item I</a>
                      </li>
                      <li class="spark-menu__list-item" role="menuitem">
                        <a tabindex="0" class="spark-menu__list-link">Third-level Item II</a>
                      </li>
                      <li class="spark-menu__list-item" role="menuitem">
                        <a tabindex="0" class="spark-menu__list-link">Third-level Item III</a>
                      </li>
                      <li class="spark-menu__list-item" role="menuitem">
                        <a tabindex="0" class="spark-menu__list-link">Third-level Item IV</a>
                      </li>
                    </ul>
                  </li>
                  <li class="spark-menu__list-item" role="menuitem">
                    <a tabindex="0" class="spark-menu__list-link">Second Level c</a>
                  </li>
                  <li class="spark-menu__list-item" role="menuitem">
                    <a tabindex="0" class="spark-menu__list-link">Second Level d</a>
                  </li>
                </ul>
              </li>
              <li class="spark-menu__list-item active" role="menuitem">
                <a tabindex="0" class="spark-menu__list-link">Sample Single Panel Form Page</a>
              </li>
              <li class="spark-menu__list-item" role="menuitem">
                <a tabindex="0" class="spark-menu__list-link spark-menu__list-expand" role="menuitemcheckbox">First Level D</a>
                <ul class="spark-menu__list">
                  <li class="spark-menu__list-item" role="menuitem">
                    <a tabindex="0" class="spark-menu__list-link">Second Level aa</a>
                  </li>
                  <li class="spark-menu__list-item" role="menuitem">
                    <a tabindex="0" class="spark-menu__list-link">Second Level bb</a>
                  </li>
                  <li class="spark-menu__list-item" role="menuitem">
                    <a tabindex="0" class="spark-menu__list-link">Second Level cc</a>
                  </li>
                </ul>
              </li>
            </ul>
          </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" aria-label="Expand or Collapse Menu" 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" aria-label="Expand or Collapse Menu" 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 aria-hidden="true" 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-header__list-cta">
                <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" aria-label="Search">
              <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" aria-label="Account Settings">
              <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-mar-t-1">
            <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-mar-t-1">
            <a href="#example-link" class="spark-link spark-zeta">Forgot username or password?</a>
          </div>
          <span class="spark-popover__caret"></span>
        </form>
      </div>
    </nav>
  </header>

  <main class="spark-main--sticky-footer" id="mainContent">
    <div class="container">
      <div class="row spark-mar-b-2 spark-mar-t-2">
        <div class="col-xs-12">
          <h1>Page Title</h1>
        </div>

        <section class="spark-table spark-table--condensed col-xs-12">
          <header class="spark-table__header">
            <h4 class="spark-table__title">
              Table Title
            </h4>
          </header>
          <div class="spark-table__scroll">
            <table role="grid">
              <thead>
                <tr>
                  <td class="spark-table__select-all spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select all rows</span>
                    </label>
                  </td>
                  <th class="spark-text-center">
                    Icon
                  </th>
                  <th data-sort="asc" tabindex="0">
                    Flight <span aria-label="Number">No.</span>
                  </th>
                  <th data-sort tabindex="0">
                    Departure <span class="spark-hidden--lte-md">Time</span>
                  </th>
                  <th data-sort tabindex="0">
                    Arrival <span class="spark-hidden--lte-md">Time</span>
                  </th>
                  <th class="spark-text-center">
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
                <tr>
                  <td class="spark-table__checkbox">
                    <label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
                      <input type="checkbox" class="spark-checkbox__input">
                      <span class="spark-checkbox__box"></span>
                      <span class="spark-assistive-text">select row</span>
                    </label>
                  </td>
                  <td class="spark-text-center">
                    <i class="spark-icon-airplane" aria-label="flight"></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">Book Flight</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>

      </div>
    </div>
  </main>

  <div class="spark-panel--fixed" data-fixed-to-bottom>
    <div class="spark-pad-1" style="background-color: #fff;">
      <div class="row spark-align-items-center">
        <div class="col-xs-12 col-sm-6 spark-mar-b-2--xs">
          <p class="spark-delta" style="color: #4a5767">
            <span class="spark-bold">23</span> items selected.
            <a href="#" class="spark-zeta spark-mar-l-.5">Clear All</a>
          </p>
        </div>

        <div class="col-xs-12 col-sm-6">
          <nav class="spark-btn-group">
            <button class="spark-btn spark-btn--md spark-btn-group-primary spark-btn--block-xs">Save Changes</button>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>

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

<style type="text/css">
  
</style>

// Vanilla JS
var el = document.querySelector('.spark-panel--fixed');
var fixedPanel = new Spark.FixedPanel(el);

Side Fixed Panels

A Side Fixed Panel is instantiated by passing the element with a class of spark-panel--fixed to new Spark.SideFixedPanel(el)

The following options may be passed when using new Spark.SideFixedPanel(el, {});:

Name	Type	Default	Description
scrollTop	boolean	true	Whether or not to always open panel scrolled to the top.
mobileBreakpoint	boolean	String	The Spark breakpoint which cover panels should always go full width.
onOpen	function	noop()	A callback function run when a Side Fixed Panel has finished opening.
onClose	function	noop()	A callback function run when a Side Fixed Panel has finished closing.
onToggle	function	noop()	A callback function run when a Side Fixed Panel has finished transitioning after calling the `toggle()` method.
onDismiss	function	noop()	A callback function run anytime a Side Fixed Panel is dismissed.

The open{} and close{} methods also return Promises.

For all available methods, click here to read the full API documentation

Side Fixed Panel with Cover

Open in New Tab

<header class="spark-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>
      </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-mar-t-1">
          <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-mar-t-1">
          <a href="#example-link" class="spark-link spark-zeta">Forgot username or password?</a>
        </div>
        <span class="spark-popover__caret"></span>
      </form>
    </div>
  </nav>
</header>

<main id="mainContent">
  <div class="container">
    <div class="row spark-mar-b-2 spark-mar-t-2">
      <div class="col-xs-12">
        <div class="row">
          <div class="col-xs-12">
            <h1>Side Fixed Panel with Cover</h1>
          </div>
          <div class="col-xs-12">
            <div class="spark-panel spark-mar-t-1">
              <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>
                  <nav class="spark-btn-group spark-mar-t-2">
                    <div class="spark-btn-group-secondary">
                      <button id="openLeft--cover" class="spark-btn spark-btn--md spark-btn--secondary" aria-controls="side-fixed-panel--cover" aria-expanded="false">Open Left</button>
                    </div>
                    <button id="openRight--cover" class="spark-btn spark-btn--md spark-btn-group-primary" aria-controls="side-fixed-panel--cover" aria-expanded="false">Open Right</button>
                  </nav>
                </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>
                </section>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <div class="spark-panel spark-mar-t-1">
              <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>
                </section>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

<aside class="spark-panel--fixed copy-panel--example" aria-expanded="false" data-position="right" data-placement="cover" id="side-fixed-panel--cover" tabindex="-1">
  <a class="spark-panel--fixed__close" aria-label="Close Panel" tabindex="0"></a>
  <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>
  </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>
  </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>
  </section>
</aside>

<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" aria-label="Twitter" 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" aria-label="Facebook" 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" aria-label="LinkedIn" 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" aria-label="Instagram" 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" aria-label="YouTube" title="YouTube">
          <i class="spark-icon-social-youtube spark-icon--fill"></i>
        </a>
      </li>
    </ul>
  </div>
</footer>


<style type="text/css">
  
  .spark-panel__container {
  align-content: flex-start;
  align-items: stretch;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow: hidden;
  position: relative;
}

.spark-panel__container .spark-panel__container__main {
  flex: 1;
  overflow-y: auto;
  padding: 0 1rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.spark-panel__container .spark-panel__container__main::-webkit-scrollbar {
  display: none;
  width: 0;
}

.spark-panel__container .spark-panel__container__panel.spark-panel--fixed[data-position][data-placement="push"] {
  position: absolute;
  top: 0;
}

.spark-panel__container .spark-panel__container__panel.spark-panel--fixed[data-position="left"][data-placement="push"] .spark-panel__container__panel__content {
  right: 0;
}

.spark-panel__container .spark-panel__container__panel.spark-panel--fixed[data-position="right"][data-placement="push"] .spark-panel__container__panel__content {
  left: 0;
}

.spark-panel--fixed[data-placement="cover"],
.spark-panel__container__panel[data-placement="cover"] {
  padding: 5rem 1rem 2rem 1rem;
}

.spark-panel--fixed[data-placement="cover"].spark-panel--docked section:not(.spark-table),
.spark-panel__container__panel[data-placement="cover"].spark-panel--docked section:not(.spark-table) {
  margin: auto 2rem 1rem;
}

.spark-panel--fixed[data-placement="cover"].spark-panel--docked hr,
.spark-panel__container__panel.spark-panel--docked hr {
  margin-left: 2rem;
  margin-right: 2rem;
}
.spark-panel--fixed .copy-panel--example:focus {
  outline: none;
}
.spark-panel--fixed[data-placement="cover"].copy-panel--example {
  padding: 1rem 2rem 2rem;
}
.spark-panel--fixed[data-placement="cover"].copy-panel--example h2 {
  margin-top: 4rem;
}
.spark-panel--fixed[data-placement="cover"]  .copy-panel--example h2,
.spark-panel__container__panel[data-placement="cover"]  .copy-panel--example h2,
.spark-panel--fixed[data-placement="push"]  .copy-panel--example h2,
.spark-panel__container__panel[data-placement="push"] .copy-panel--example h2 {
  margin-top: 5rem;
}

.spark-panel--fixed[data-placement="push"],
.spark-panel__container__panel[data-placement="push"] {
  max-height: calc(100vh - 84px - 61px);
}

.spark-panel--fixed[data-placement="push"] form,
.spark-panel__container__panel[data-placement="push"] form {
  margin: 1rem 2rem auto 2rem;
}

.spark-panel--fixed[data-placement="push"] section,
.spark-panel__container__panel[data-placement="push"] section {
  margin: auto 2rem 1rem;
}

.spark-panel--fixed[data-placement="push"] hr,
.spark-panel__container__panel[data-placement="push"] hr {
  margin-left: 2rem;
  margin-right: 2rem;
}


  .spark-panel--fixed {
    width: 365px;
  }

  @media screen and (max-width: 355px) {
    .spark-panel--fixed {
      width: 100%;
    }
  }

</style>

var sideFixedPanelEl = document.querySelector('aside.spark-panel--fixed');
var sideFixedPanel = new Spark.SideFixedPanel(sideFixedPanelEl);

sideFixedPanel.on('open', function() {
  sideFixedPanel.el.querySelector('.spark-panel--fixed .spark-panel--fixed__close').focus();
});

var openLeftButton = document.getElementById('openLeft--cover');
var openRightButton = document.getElementById('openRight--cover');

openLeftButton.addEventListener('click', function(e) {
  e.preventDefault();
  sideFixedPanel.open({
    position: 'left',
    underlay: false
  });
  return false;
});

openRightButton.addEventListener('click', function(e) {
  e.preventDefault();
  sideFixedPanel.open({
    position: 'right',
    underlay: false
  });
  return false;
});

sideFixedPanel.on('close', function() {
  var openButton = sideFixedPanel.position === 'right' ? openRightButton : openLeftButton;
  openButton.focus();
});

See additional guidelines for important details about implementing this type of Side Fixed Panel in your application.

Side Fixed Panel with Cover and Underlay

Open in New Tab

<header class="spark-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>
      </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-mar-t-1">
          <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-mar-t-1">
          <a href="#example-link" class="spark-link spark-zeta">Forgot username or password?</a>
        </div>
        <span class="spark-popover__caret"></span>
      </form>
    </div>
  </nav>
</header>

<main id="mainContent">
  <div class="container">
    <div class="row spark-mar-b-2 spark-mar-t-2">
      <div class="col-xs-12">
        <div class="row">
          <div class="col-xs-12">
            <h1>Side Fixed Panel with Cover and Underlay</h1>
          </div>
          <div class="col-xs-12">
            <div class="spark-panel spark-mar-t-1">
              <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>
                  <nav class="spark-btn-group spark-mar-t-2">
                    <div class="spark-btn-group-secondary">
                      <button id="openLeft--cover--underlay" aria-expanded="false" class="spark-btn spark-btn--md spark-btn--secondary" aria-controls="side-fixed-panel--cover--overlay">Open Left</button>
                    </div>
                    <button id="openRight--cover--underlay" aria-expanded="false" class="spark-btn spark-btn--md spark-btn-group-primary" aria-controls="side-fixed-panel--cover--overlay">Open Right</button>
                  </nav>
                </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>
                </section>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <div class="spark-panel spark-mar-t-1">
              <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>
                </section>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

<aside class="spark-panel--fixed copy-panel--example" data-position="right" data-placement="cover" id="side-fixed-panel--cover--overlay" tabindex="-1">
  <a class="spark-panel--fixed__close" aria-label="Close Panel" tabindex="0"></a>
  <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>
  </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>
  </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>
  </section>
</aside>

<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" aria-label="Twitter" 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" aria-label="Facebook" 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" aria-label="LinkedIn" 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" aria-label="Instagram" 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" aria-label="YouTube" title="YouTube">
          <i class="spark-icon-social-youtube spark-icon--fill"></i>
        </a>
      </li>
    </ul>
  </div>
</footer>


<style type="text/css">
  
  .spark-panel__container {
  align-content: flex-start;
  align-items: stretch;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow: hidden;
  position: relative;
}

.spark-panel__container .spark-panel__container__main {
  flex: 1;
  overflow-y: auto;
  padding: 0 1rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.spark-panel__container .spark-panel__container__main::-webkit-scrollbar {
  display: none;
  width: 0;
}

.spark-panel__container .spark-panel__container__panel.spark-panel--fixed[data-position][data-placement="push"] {
  position: absolute;
  top: 0;
}

.spark-panel__container .spark-panel__container__panel.spark-panel--fixed[data-position="left"][data-placement="push"] .spark-panel__container__panel__content {
  right: 0;
}

.spark-panel__container .spark-panel__container__panel.spark-panel--fixed[data-position="right"][data-placement="push"] .spark-panel__container__panel__content {
  left: 0;
}

.spark-panel--fixed[data-placement="cover"],
.spark-panel__container__panel[data-placement="cover"] {
  padding: 5rem 1rem 2rem 1rem;
}

.spark-panel--fixed[data-placement="cover"].spark-panel--docked section:not(.spark-table),
.spark-panel__container__panel[data-placement="cover"].spark-panel--docked section:not(.spark-table) {
  margin: auto 2rem 1rem;
}

.spark-panel--fixed[data-placement="cover"].spark-panel--docked hr,
.spark-panel__container__panel.spark-panel--docked hr {
  margin-left: 2rem;
  margin-right: 2rem;
}
.spark-panel--fixed .copy-panel--example:focus {
  outline: none;
}
.spark-panel--fixed[data-placement="cover"].copy-panel--example {
  padding: 1rem 2rem 2rem;
}
.spark-panel--fixed[data-placement="cover"].copy-panel--example h2 {
  margin-top: 4rem;
}
.spark-panel--fixed[data-placement="cover"]  .copy-panel--example h2,
.spark-panel__container__panel[data-placement="cover"]  .copy-panel--example h2,
.spark-panel--fixed[data-placement="push"]  .copy-panel--example h2,
.spark-panel__container__panel[data-placement="push"] .copy-panel--example h2 {
  margin-top: 5rem;
}

.spark-panel--fixed[data-placement="push"],
.spark-panel__container__panel[data-placement="push"] {
  max-height: calc(100vh - 84px - 61px);
}

.spark-panel--fixed[data-placement="push"] form,
.spark-panel__container__panel[data-placement="push"] form {
  margin: 1rem 2rem auto 2rem;
}

.spark-panel--fixed[data-placement="push"] section,
.spark-panel__container__panel[data-placement="push"] section {
  margin: auto 2rem 1rem;
}

.spark-panel--fixed[data-placement="push"] hr,
.spark-panel__container__panel[data-placement="push"] hr {
  margin-left: 2rem;
  margin-right: 2rem;
}


  .spark-panel--fixed {
    width: 365px;
  }

  @media screen and (max-width: 355px) {
    .spark-panel--fixed {
      width: 100%;
    }
  }

</style>

var sideFixedPanelEl = document.querySelector('aside.spark-panel--fixed');
var sideFixedPanel = new Spark.SideFixedPanel(sideFixedPanelEl);

sideFixedPanel.on('open', function() {
  sideFixedPanel.el.querySelector('.spark-panel--fixed .spark-panel--fixed__close').focus();
});

var openLeftButton = document.getElementById('openLeft--cover--underlay');
var openRightButton = document.getElementById('openRight--cover--underlay');

openLeftButton.addEventListener('click', function(e) {
  e.preventDefault();
  sideFixedPanel.open({
    position: 'left'
  });
  return false;
});

openRightButton.addEventListener('click', function(e) {
  e.preventDefault();
  sideFixedPanel.open({
    position: 'right'
  });
  return false;
});

sideFixedPanel.on('close', function() {
  var openButton = sideFixedPanel.position === 'right' ? openRightButton : openLeftButton;
  openButton.focus();
});

See additional guidelines for important details about implementing this type of Side Fixed Panel in your application.

Additional Guidelines for Side Fixed Panels

When creating a Side Fixed Panel, the primary <aside> is best placed unnested, directly on the <body>.
All Side Fixed Panels should have a unique id. This is important for accessibility purposes, as well as functionality if you plan to utilize the automatic alternate panel behavior on screens too small to support your design for larger screens.
It will be necessary to add an event listener to your own control in order to call the component’s open() method from the JavaScript API. The examples shown use Spark buttons, but this is not a prescribed method. You are free to trigger these panels by whatever means works best for your application.
- When using your own control, you will also need to write a callback to run after each time the Side Fixed Panel closes. This is for accessibility purposes, as you‘ll need to return focus back to the element that was used to open the Side Fixed Panel, after it has finished closing. You can do this in several ways.
  - If using events, you can register your callback to the Side Fixed Panel‘s "close" event with the component‘s on() method, using the syntax mySideFixedPanelInstance.on("close", myCallback);.
  - To use promises when controlling the Side Fixed Panel directly through the JavaScript API, you can chain your callback to the call of close() using the then() method on the returned Promise, using this syntax mySideFixedPanelInstance.close().then(myCallback);.
  - If using callbacks, provide a callback method up front when instantiating the Side Fixed Panel, using this syntax var mySideFixedPanelInstance = new Spark.SideFixedPanel(el, {onClose: myCallback});.
The following table lists all the events emitted by Side Fixed Panels. The “Can be Triggered” column indicates whether an event can be triggered programmatically using the Side Fixed Panel‘s trigger() method.

Event	Can Be Triggered	Description
open	No	Fired once a Side Fixed Panel has finished animating open.
close	No	Fired once a Side Fixed Panel has finished animating closed.
dismiss	Yes	Fired manually by developer, or by Spark anytime a related Spark entity wants to signal the user is done using the panel (such as when a coupled Underlay is tapped, or the panel close button is clicked). Causes the Side Fixed Panel to close if open. No effect on a Side Fixed Panel that is already closed.
toggle	No	Fired whenever the `toggle()` method is used. Useful if you‘d like to validate an open or close state, or run logic only if open or closed.

When opening a Side Fixed Panel, you may control whether or not to show an Underlay by passing a params object to open(). If you don‘t specify an option, then an Underlay will render by default. To prevent an Underlay when opening a Side Fixed Panel, specify FALSE using the syntax mySideFixedPanelInstance.open({underlay: false});. See the sample code for an example.
When opening a Side Fixed Panel, it‘s possible to dynamically change the side of the screen it slides out from, at the time of calling open(). Supported values include "right" or "left". You can check the current position of a Side Fixed Panel at any time by accessing the position property using the syntax mySideFixedPanelInstance.position. To change the position dynamically on open, pass a params object to open() that includes the new value using the syntax mySideFixedPanelInstance.open({position: "right"});. See the sample code for an example.

Accessibility Notes

The Spark Panel component has been developed with accessibility in mind, but it is important to customize certain aspects to better suit the product you are building. This will revolve around adding aria attributes to certain elements within the component.

Standard panel

For the standard panel, the aria-hidden attribute is added to the spark-expand__content container and initially set to true to indicate that the hidden content is not accessible to screen-readers and assistive devices. The corresponding toggle buttons have aria-expanded and aria-hidden attributes set to indicate whether the panel is expanded and whether the button is hidden respectively. To indicate that the container is controlled by the toggle buttons, the aria-controls attribute is added to each of the buttons. The value of this attribute is then set as the id of the container.

When a user interacts with the panel and either collapses or expands it, the attributes above will be adjusted using Javascript to the appropriate values indicating the current state of the panel.

If you have multiple panels on a single page, it is important to use unique ids to make sure the controls and content are properly associated. It is also important to provide the proper button text in this scenario so that users navigating using assistive devices understand which sections are being expanded or collapsed. For example, if there are two panels on a page, each toggle button should have an aria-label to provide more descriptive text of the section being expanded or collapsed as illustrated in the example below.

<button class="spark-btn spark-btn--text spark-expand__toggle spark-expand__hide--expanded" aria-expanded="false" aria-hidden="false" aria-controls="panel__content" aria-label="View more of this book summary">View More<span class="spark-expand__toggle-caret"></span></button>

<button class="spark-btn spark-btn--text spark-expand__toggle spark-expand__show--expanded" aria-expanded="true" aria-hidden="true" aria-controls="panel__content" aria-label="View less of this book summary">View Less<span class="spark-expand__toggle-caret"></span></button>

Image panel

Ensure that an alt attribute is set on the image element. If the image is purely decorative or equivalent text is in the content of the panel itself, then an empty alt attribute may be used.

Fixed panel

The contents of the Fixed Panel will require appropriate Accessibility enhancements depending on the components used in it. Refer to the Accessibility tab of the component’s documentation for relevant guidelines.

Side Fixed Panel

When using a Side Fixed Panel, it’ll be important to give your Side Fixed Panel an id, and to include the proper ARIA attributes necessary to associate your control with the panel.

aria-controls - setting this to the id on your Side Fixed Panel will let the browser know that this element triggers your panel.
aria-expanded - the element you use to trigger the panel will also need this attribute to track which state the panel is currently in. Set to false initially, or true if your Side Fixed Panel first renders as open. As you open and close your Panel, this attribute will automatically be updated for you.

<button id="openPanel" aria-controls="side-fixed-panel" aria-expanded="false">Open</button>
...
<aside id="side-fixed-panel" class="spark-panel--fixed" data-placement="cover" data-position="right" tabindex="-1">...</aside>

On the Side Fixed Panel itself, the following attributes should be provided for accessibility purposes.

tabindex="-1" - this tells the browser that the Side Fixed Panel itself should be skipped over, when assigning the next active element for focus on tab, and instead directs the browsers focus to the Panel’s contents.

<aside id="side-fixed-panel" class="spark-panel--fixed" data-placement="cover" data-position="right" aria-expanded="false" tabindex="-1">...</aside>

You’ll also need to provide a callback for the Side Fixed Panel’s “close” event, that returns focus back to your trigger element. This can be done using the component’s .on() method.

<button id="openPanel" aria-controls="side-fixed-panel" aria-expanded="false">Open</button>
...
<aside id="side-fixed-panel" class="spark-panel--fixed" data-placement="cover" data-position="right" tabindex="-1">...</aside>

var sideFixedPanelEl = document.querySelector('.spark-panel--fixed');
var sideFixedPanel = new Spark.SideFixedPanel(sideFixedPanelEl);

sideFixedPanel.on('close', function(e) {
  var buttonEl = document.getElementById('openPanel');
  buttonEl.focus();
});

// or

var sideFixedPanelEl = document.querySelector('.spark-panel--fixed');
var sideFixedPanel = new Spark.SideFixedPanel(sideFixedPanelEl, {
  onClose: function() {
    var buttonEl = document.getElementById('openPanel');
    buttonEl.focus();
  }
});

When tabbing with a Side Fixed Panel, focus should be allowed to enter and then leave the Panel as long as there is no Underlay present. If an Underlay is present, tabbing should be restricted to contents of the Side Fixed Panel only.