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.
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.
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.
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.
Variations
- Standard Panel (shown above)
- Expand/Collapse Panel
- Image Panel
- Fixed Panel
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.
Variations
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.
Fixed Panels
These variations may be used when content needs to persist on the screen, and they may be docked to the top or bottom of the viewport. Currently, only top and bottom docking are supported, but future iterations will consider docking to the left or right 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 design samples for recommended content and layout guidance.
Top Fixed Panel
This variation appears below the header and remains fixed as the user scrolls.
Top Fixed Panel with Scroll Behavior
This variation is fixed initially, and then appears/disappears based on the user’s scroll behavior.
Top Fixed Panel with Hide at Element Behavior
In this variation, 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.
Bottom Fixed Panel
This variation is recommended for persistent access to primary call-to-action buttons. We recommend not using a footer with the Bottom Fixed Panel.
Additional Guidelines
- Consider keeping the contents of the Fixed Panel at a minimum to reduce the amount of vertical screen real-estate taken up, particularly on smaller devices.
- Do not use to display messages. Instead use the appropriate Message type or Toast Notification.
- Do not use more than one Fixed Panel at a time in the same location, e.g. two Fixed Panels docked to the top of the viewport.
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.
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
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.
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.
<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);
// Optional jQuery version
$('.spark-expand').sparkExpand();Expand/Collapse Panel
Panel Heading
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.
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.
<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);
// Optional jQuery version
$('.spark-panel--expand').sparkExpand();Image Heading Panel
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.
<div class="spark-panel spark-panel--card col-xs-12 col-sm-6">
<div class="spark-panel__masthead">
<img src="//placekitten.com/711/400" 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);
// Optional jQuery version
$('.spark-expand').sparkExpand();Fixed Panel
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
<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" 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>
<button class="spark-header__logout spark-header__collapsed-show">Logout</button>
</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" 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" 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-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">
<i class="spark-icon--fill spark-icon-search spark-icon--md"></i>
<span class="spark-header__collapsed-show">Search</span>
</a>
</li>
<li class="spark-menu__list-item spark-menu__list-item--secondary" role="menuitem">
<a href="#" class="spark-menu__list-link spark-menu__ignore">
<i class="spark-icon--fill spark-icon-cog spark-icon--md"></i>
<span class="spark-header__collapsed-show">Account Settings</span>
</a>
</li>
</ul>
</div>
<div class="spark-header__sign-in spark-popover">
<a href="#" class="spark-menu__list-link spark-popover__toggle">Sign In</a>
<form class="spark-popover__content--bottom col-xs-8 col-md-4" role="tooltip" onsubmit="return false;" data-anchor-x="right">
<a href="#" class="spark-popover__close" title="Close"></a>
<h4>Account Sign In</h4>
<label class="spark-input spark-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">
<button class="spark-btn--link spark-eta">Forgot username or password?</button>
</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 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 class="spark-icon spark-icon-arrow-basic-right"></span>
<span class="summary-label">SFO</span>
</span>
</div>
<span class="summary-detail spark-block spark-mar-t-.5--gte-sm">Sep 23 – 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" title="Twitter">
<i class="spark-icon-social-twitter spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" title="Facebook">
<i class="spark-icon-social-facebook spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" title="LinkedIn">
<i class="spark-icon-social-linkedin spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" title="Instagram">
<i class="spark-icon-social-instagram spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" title="YouTube">
<i class="spark-icon-social-youtube spark-icon--fill"></i>
</a>
</li>
</ul>
</div>
</footer>
</div>
<style type="text/css">
.white-bg {
background-color: #ffffff;
}
</style>
<style type="text/css">
.summary-bar {
background: #fff;
padding: 1rem;
}
@media (min-width: 544px) {
.summary-bar {
padding: 1rem 2rem;
}
}
.summary-bar--pod:last-child {
color: #75a01f;
font-size: 1.33333333rem;
font-weight: 300;
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: 400;
}
.summary-label {
color: #4a5767;
display: block;
font-size: 1.66666667rem;
line-height: 2.0833333rem;
}
@media (min-width: 544px) {
.summary-label {
font-size: 2.0833333rem;
}
}
.summary-detail {
color: #555;
font-size: 1.08333333rem;
line-height: 1.33333333rem;
}
@media (min-width: 544px) {
.summary-detail {
font-size: 1.33333333rem;
}
}
.summary-bar .spark-icon-airplane,
.summary-bar .spark-icon-arrow-basic-right {
color: #3399cc;
}
.summary-bar .spark-icon-arrow-basic-right {
line-height: 2.08333333rem;
margin: 0 1rem;
}
@media (max-width: 543px) {
.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
<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" 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>
<button class="spark-header__logout spark-header__collapsed-show">Logout</button>
</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" 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" 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-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">
<i class="spark-icon--fill spark-icon-search spark-icon--md"></i>
<span class="spark-header__collapsed-show">Search</span>
</a>
</li>
<li class="spark-menu__list-item spark-menu__list-item--secondary" role="menuitem">
<a href="#" class="spark-menu__list-link spark-menu__ignore">
<i class="spark-icon--fill spark-icon-cog spark-icon--md"></i>
<span class="spark-header__collapsed-show">Account Settings</span>
</a>
</li>
</ul>
</div>
<div class="spark-header__sign-in spark-popover">
<a href="#" class="spark-menu__list-link spark-popover__toggle">Sign In</a>
<form class="spark-popover__content--bottom col-xs-8 col-md-4" role="tooltip" onsubmit="return false;" data-anchor-x="right">
<a href="#" class="spark-popover__close" title="Close"></a>
<h4>Account Sign In</h4>
<label class="spark-input spark-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">
<button class="spark-btn--link spark-eta">Forgot username or password?</button>
</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 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 class="spark-icon spark-icon-arrow-basic-right"></span>
<span class="summary-label">SFO</span>
</span>
</div>
<span class="summary-detail spark-block spark-mar-t-.5--gte-sm">Sep 23 – 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" title="Twitter">
<i class="spark-icon-social-twitter spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" title="Facebook">
<i class="spark-icon-social-facebook spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" title="LinkedIn">
<i class="spark-icon-social-linkedin spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" title="Instagram">
<i class="spark-icon-social-instagram spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" title="YouTube">
<i class="spark-icon-social-youtube spark-icon--fill"></i>
</a>
</li>
</ul>
</div>
</footer>
</div>
<style type="text/css">
.white-bg {
background-color: #ffffff;
}
</style>
<style type="text/css">
.summary-bar {
background: #fff;
padding: 1rem;
}
@media (min-width: 544px) {
.summary-bar {
padding: 1rem 2rem;
}
}
.summary-bar--pod:last-child {
color: #75a01f;
font-size: 1.33333333rem;
font-weight: 300;
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: 400;
}
.summary-label {
color: #4a5767;
display: block;
font-size: 1.66666667rem;
line-height: 2.0833333rem;
}
@media (min-width: 544px) {
.summary-label {
font-size: 2.0833333rem;
}
}
.summary-detail {
color: #555;
font-size: 1.08333333rem;
line-height: 1.33333333rem;
}
@media (min-width: 544px) {
.summary-detail {
font-size: 1.33333333rem;
}
}
.summary-bar .spark-icon-airplane,
.summary-bar .spark-icon-arrow-basic-right {
color: #3399cc;
}
.summary-bar .spark-icon-arrow-basic-right {
line-height: 2.08333333rem;
margin: 0 1rem;
}
@media (max-width: 543px) {
.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
<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>
<li class="spark-menu__list-item spark-menu__list-item--secondary" role="menuitem">
<a href="#" class="spark-menu__list-link spark-menu__ignore">
<i class="spark-icon--fill spark-icon-cog spark-icon--md"></i>
<span class="spark-header__collapsed-show">Account Settings</span>
</a>
</li>
</ul>
</div>
<div class="spark-header__sign-in spark-popover">
<a href="#" class="spark-menu__list-link spark-popover__toggle">Sign In</a>
<form class="spark-popover__content--bottom col-xs-8 col-md-4" role="tooltip" onsubmit="return false;" data-anchor-x="right">
<a href="#" class="spark-popover__close" title="Close"></a>
<h4>Account Sign In</h4>
<label class="spark-input spark-margin-top">
<input class="spark-input__field" name="username" role="textbox">
<span class="spark-label">Username</span>
</label>
<label class="spark-input">
<input class="spark-input__field" name="password" type="password" role="textbox">
<span class="spark-label">Password</span>
</label>
<button class="spark-btn spark-btn--md spark-btn--block">Sign In</button>
<div class="spark-text-center spark-margin-top">
<button class="spark-btn--link spark-eta">Forgot username or password?</button>
</div>
<span class="spark-popover__caret"></span>
</form>
</div>
</nav>
</header>
<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 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 – 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-margin-bottom--lg spark-margin-top--lg">
<div class="col-xs-12 col-lg-4 spark-hidden--lte-md">
<div class="row spark-mar-t-0 spark-mar-l-0 spark-mar-r-0 spark-mar-b-2 spark-pad-0">
<div class="spark-panel spark-pad-2" data-toast="filter">
<div class="row">
<div class="col-lg-12">
<h3>Side Panel</h3>
</div>
</div>
<h4>Panel Headline</h4>
<fieldset class="row spark-mar-b-1">
<label class="col-xs-12 spark-checkbox">
<input class="spark-checkbox__input" type="checkbox" checked="">
<span class="spark-checkbox__box"></span> <span class="spark-label">Label 1</span>
</label>
<label class="col-xs-12 spark-checkbox">
<input class="spark-checkbox__input" type="checkbox" checked="">
<span class="spark-checkbox__box"></span> <span class="spark-label">Label 2</span>
</label>
<label class="col-xs-12 spark-checkbox">
<input class="spark-checkbox__input" type="checkbox" checked="">
<span class="spark-checkbox__box"></span> <span class="spark-label">Label 3</span>
</label>
<label class="col-xs-12 spark-checkbox">
<input class="spark-checkbox__input" type="checkbox" checked="">
<span class="spark-checkbox__box"></span> <span class="spark-label">Label 4</span>
</label>
</fieldset>
<h4>Panel Headline <span class="spark-thin">(Optional)</span></h4>
<p class="spark-mar-b-1">Panel headline description.</p>
<fieldset class="spark-multi-select spark-mar-b-2" aria-label="Select Options" size="4">
<fieldset class="spark-multi-select__container spark-pad-1">
<label class="spark-checkbox">
<input class="spark-checkbox__input" type="checkbox" checked="">
<span class="spark-checkbox__box"></span> <span class="spark-label">Program 1</span>
</label>
<label class="spark-checkbox">
<input class="spark-checkbox__input" type="checkbox" checked="">
<span class="spark-checkbox__box"></span> <span class="spark-label">Program 2</span>
</label>
<label class="spark-checkbox">
<input class="spark-checkbox__input" type="checkbox" checked="">
<span class="spark-checkbox__box"></span> <span class="spark-label">Program 3</span>
</label>
<label class="spark-checkbox">
<input class="spark-checkbox__input" type="checkbox" checked="">
<span class="spark-checkbox__box"></span> <span class="spark-label">Program 4</span>
</label>
<label class="spark-checkbox">
<input class="spark-checkbox__input" type="checkbox" checked="">
<span class="spark-checkbox__box"></span> <span class="spark-label">Program 5</span>
</label>
<label class="spark-checkbox">
<input class="spark-checkbox__input" type="checkbox" checked="">
<span class="spark-checkbox__box"></span> <span class="spark-label">Program 6</span>
</label>
</fieldset>
</fieldset>
<h4>Panel Headline <span class="spark-thin">(Optional)</span></h4>
<div class="spark-range-slider spark-slider--primary spark-mar-b-2">
<p class="spark-mar-b-1">Panel headline description.</p>
<input type="number" min="0" max="100" value="0" title="Start">
<span class="spark-range-slider__input-divider"></span>
<input type="number" min="0" max="100" value="100" title="End">
<div class="spark-slider__controls">
<button class="spark-slider__handle" title="Start" data-value="0" style="left: 3%;"></button>
<button class="spark-slider__handle" title="End" data-value="100" style="left: 97%;"></button>
<span class="spark-slider__track"> <span class="spark-slider__track-fill" style="width: 100%; left: 0%;"></span> </span>
</div>
</div>
<button class="spark-btn spark-btn--md spark-btn--block spark-mar-t-2" data-button="filter">Display Toast</button>
</div>
</div>
</div>
<div class="col-xs-12 col-lg-8">
<div class="row">
<div class="col-xs-12">
<h1>Single Panel Page</h1>
</div>
<div class="col-xs-12">
<div class="spark-panel spark-margin-top" data-toast="panel">
<div class="spark-panel__content">
<section>
<h2>Panel Heading</h2>
<p>
Lorem ipsum Aliqua occaecat voluptate qui sint occaecat in laboris amet dolor ea aliquip qui in quis ullamco non commodo est sit laborum aliqua ex do incididunt.
</p>
<p>
Duis elit laborum cupidatat do cillum nulla est culpa elit cillum culpa in culpa velit nisi commodo commodo sit Duis magna irure anim enim nisi mollit sit et enim adipisicing aute sed proident consequat proident ullamco consectetur fugiat dolore culpa deserunt veniam eu magna dolor proident tempor aliqua dolor officia enim.
</p>
</section>
<hr />
<section>
<h3>Sub-Section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae perferendis eligendi deserunt optio, voluptatum et amet obcaecati at, earum eos veritatis quaerat ullam ad, quisquam consequuntur velit nihil maxime recusandae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos impedit dolorum rem magnam veniam eligendi, quas deserunt inventore perspiciatis. Veniam non sequi distinctio illum, eum quod vel sunt alias consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ut sed similique deserunt molestias temporibus soluta rem placeat libero et, enim eius repudiandae corporis iusto. Assumenda consectetur nihil, enim libero.</p>
<nav class="spark-btn-group spark-margin-top--lg">
<div class="spark-btn-group-secondary">
<button class="spark-btn spark-btn--md spark-btn--secondary spark-modal__dismiss" data-button='warning'>Warning</button>
<button class="spark-btn spark-btn--md spark-btn--secondary" data-button='neutral'>Neutral</button>
</div>
<button class="spark-btn spark-btn--md spark-btn-group-primary" data-button='success'>Success</button>
</nav>
</section>
</div>
</div>
</div>
</div>
<div class="row" data-example-id="hide-fixed-panel">
<div class="col-xs-12">
<div class="spark-panel spark-margin-top" 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-margin-top--lg">
<div class="spark-btn-group-secondary">
<button class="spark-btn spark-btn--md spark-btn--secondary spark-modal__dismiss" data-button='warning'>Warning</button>
<button class="spark-btn spark-btn--md spark-btn--secondary" data-button='neutral'>Neutral</button>
</div>
<button class="spark-btn spark-btn--md spark-btn-group-primary" data-button='success'>Success</button>
</nav>
</section>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="spark-panel spark-margin-top" data-toast="panel">
<div class="spark-panel__content">
<section>
<h2>Panel Heading</h2>
<p>
Lorem ipsum Aliqua occaecat voluptate qui sint occaecat in laboris amet dolor ea aliquip qui in quis ullamco non commodo est sit laborum aliqua ex do incididunt.
</p>
<p>
Duis elit laborum cupidatat do cillum nulla est culpa elit cillum culpa in culpa velit nisi commodo commodo sit Duis magna irure anim enim nisi mollit sit et enim adipisicing aute sed proident consequat proident ullamco consectetur fugiat dolore culpa deserunt veniam eu magna dolor proident tempor aliqua dolor officia enim.
</p>
</section>
<hr />
<section>
<h3>Sub-Section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae perferendis eligendi deserunt optio, voluptatum et amet obcaecati at, earum eos veritatis quaerat ullam ad, quisquam consequuntur velit nihil maxime recusandae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos impedit dolorum rem magnam veniam eligendi, quas deserunt inventore perspiciatis. Veniam non sequi distinctio illum, eum quod vel sunt alias consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ut sed similique deserunt molestias temporibus soluta rem placeat libero et, enim eius repudiandae corporis iusto. Assumenda consectetur nihil, enim libero.</p>
<nav class="spark-btn-group spark-margin-top--lg">
<div class="spark-btn-group-secondary">
<button class="spark-btn spark-btn--md spark-btn--secondary spark-modal__dismiss" data-button='warning'>Warning</button>
<button class="spark-btn spark-btn--md spark-btn--secondary" data-button='neutral'>Neutral</button>
</div>
<button class="spark-btn spark-btn--md spark-btn-group-primary" data-button='success'>Success</button>
</nav>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="spark-footer">
<div class="container">
<a class="spark-footer__logo spark-hidden--lte-sm" title="Sabre"><i class="spark-logo spark-logo--sabre spark-logo--xs"></i></a>
<div class="spark-footer__content">
<div class="spark-footer__copyright">
© 2015-16 Sabre <span class="spark-hidden--lte-md">Curabitur blandit tempus porttitor.</span>
</div>
<ul class="spark-footer__list">
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" href="javascript: void(0);">
Legal Policy
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" href="javascript: void(0);">
Contact Us
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" href="javascript: void(0);">
Support
</a>
</li>
</ul>
</div>
<ul class="spark-footer__list spark-footer__list--right spark-footer__list--icons">
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" title="Twitter">
<i class="spark-icon-social-twitter spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" title="Facebook">
<i class="spark-icon-social-facebook spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" title="LinkedIn">
<i class="spark-icon-social-linkedin spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" title="Instagram">
<i class="spark-icon-social-instagram spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" title="YouTube">
<i class="spark-icon-social-youtube spark-icon--fill"></i>
</a>
</li>
</ul>
</div>
</footer>
<style type="text/css">
.spark-icon-airplane,
.spark-icon-arrow-basic-right {
color: #3399cc;
}
.spark-icon-arrow-basic-right {
margin: 0 1rem;
}
@media (max-width: 543px) {
.spark-icon-arrow-basic-right {
font-size: 1.08333333rem;
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 this variation of the 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.
<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" 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>
<button class="spark-header__logout spark-header__collapsed-show">Logout</button>
</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" 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" 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-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">
<i class="spark-icon--fill spark-icon-search spark-icon--md"></i>
<span class="spark-header__collapsed-show">Search</span>
</a>
</li>
<li class="spark-menu__list-item spark-menu__list-item--secondary" role="menuitem">
<a href="#" class="spark-menu__list-link spark-menu__ignore">
<i class="spark-icon--fill spark-icon-cog spark-icon--md"></i>
<span class="spark-header__collapsed-show">Account Settings</span>
</a>
</li>
</ul>
</div>
<div class="spark-header__sign-in spark-popover">
<a href="#" class="spark-menu__list-link spark-popover__toggle">Sign In</a>
<form class="spark-popover__content--bottom col-xs-8 col-md-4" role="tooltip" onsubmit="return false;" data-anchor-x="right">
<a href="#" class="spark-popover__close" title="Close"></a>
<h4>Account Sign In</h4>
<label class="spark-input spark-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">
<button class="spark-btn--link spark-eta">Forgot username or password?</button>
</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);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.
Image 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.