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
- Usage and Display
- Examples
- Developer Notes
- Accessibility Notes
Standard Panel Example
Panel heading
Donec tincidunt vitae magna non ultricies. Maecenas sed mauris imperdiet, rhoncus mauris eget, eleifend ex. Donec turpis enim, interdum et ullamcorper nec, hendrerit eget libero. Maecenas dictum laoreet venenatis. Nulla nulla velit, semper et hendrerit vitae, gravida a tortor. In sed iaculis velit. Mauris dignissim maximus neque non luctus.
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.
Examples
- Standard Panel (shown above)
- Expand/Collapse Panel
- Image Panel
- Top & Bottom Fixed Panels
- Side Fixed Panels
Usage and Display
- Panel headings may appear inside or outside of the panel, except when using expand/collapse panels, which always display the heading inside of the panel.
- Panels should have a 4-pixel corner radius.
- Include 24 pixels of padding within the panels.
- When a sequence of panels appear in a side-by-side arrangement, make sure that they have consistent heights.
- Align panels to the grid.
Examples
Expand/Collapse Panel
Use an expand/collapse panel to allow expand/collapse functionality of an entire panel.
See Expand/Collapse for details.
Image Panel Example
This may be used when images are used to distinguish blocks of content on a page.
$289
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.
Top & Bottom 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, or sides of the viewport. Refer to the Developer Tab for a list of available configurations and associated behaviors.
Content inside of the Fixed Panel can vary. See the Transaction Summary Bar and Side Fixed Panel design samples for content examples and layout guidance.
Top Fixed Panel
This variation appears below the header and remains fixed as the user scrolls.
Top Fixed Panel with Scroll Behavior
This variation is fixed initially, but disappears when scrolling toward the bottom of the page and reappears when scrolling toward the top of the page.
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.
Side Fixed Panels
Side Fixed Panel with Cover and Underlay
This variation can appear on the left or right side of the viewport, and it overlaps the main content. The control for accessing the Side Fixed Panel should be positioned on the same side as the Side Fixed Panel itself. Additionally, this variation may include an underlay to subdue the main content and place focus on the Side Fixed Panel.
Side Fixed Panel with Cover
Additional Guidelines
- Consider keeping the contents within a top or bottom Fixed Panel at a minimum to reduce the amount of screen real-estate taken up, particularly on smaller devices.
- Fixed Panels should not be used (exclusively) to display messages, however, it’s important to note that messages, including Toast Notifications can appear within Fixed Panels.
- When using a Side Fixed Panel in addition to top and bottom Fixed Panels, the top and bottom panels take priority, with the side panel(s) lying underneath.
- Regarding Side Fixed Panels, keep any controls within close proximity to the panel, demonstrating best practices.
- Consider limiting the total amount of Fixed Panels displayed within a single screen. For example, avoid using two top Fixed Panels together.
Developer Notes
A panel is created by adding the spark-panel class to an element. These cards are best sized using the responsive grid. The content for the panel should be placed inside of an element with a class of spark-panel__content. Optionally, a header can be defined using the spark-panel__header element.
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);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);Image Heading Panel
$289
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="https://sabre-spark.s3.amazonaws.com/site_assets/design_assets/panel-image-stockholm.jpg" alt="">
<span class="spark-numerals spark-alt">$289</span>
</div>
<div class="spark-panel__content">
<h3>Amazing Deal</h3>
<p>
Duis elit laborum cupidatat do cillum nulla est culpa elit cillum culpa in culpa velit nisi commodo commodo sit Duis magna irure anim enim nisi mollit sit et enim adipisicing aute sed proident consequat proident ullamco consectetur fugiat dolore culpa deserunt veniam eu magna dolor proident tempor aliqua dolor officia enim.
</p>
<button class="spark-btn spark-btn--text">Claim This Deal</button>
</div>
</div>
<style type="text/css">
</style>// Vanilla JS
var el = document.querySelector('.spark-expand');
var expandInstance = new Spark.Expand(el);Top & Bottom Fixed Panels
The Default Fixed Panel can be accessed by adding the spark-panel--fixed to the element thus fixing the panel to the top of the viewport on scroll.
The following options may be passed when using new Spark.FixedPanel(el, {});:
| Name | Type | Default | Description |
|---|---|---|---|
| hideOnScroll | boolean | false | Hides the Fixed Panel when a user scrolls. If not passed the component will check for the value of the data-hide-on-scroll attribute. |
| fixToBottom | boolean | false | Docks the Fixed Panel to the bottom of the Viewport. If not passed the component will check for the value of the data-fixed-to-bottom attribute. |
| unlockBreakPoint | string | null | Sets breakpoint, at which the Fixed Panel is docked. Should be one of xs, sm, md, or lg. If not passed the component will check for the data-breakpoint attribute. |
| condenseOnScroll | boolean | false | Applies the spark-panel--condensed class once the scroll position exceeds the height of the Header and Panel. This class can then be used to add additional condensed styling to the contents of the Fixed Panel e.g. reducing font-sizes, margins or padding. If not passed this component will check for the data-condense attribute. |
| headerEl | Element | null | The Header element to be used if it is not a Spark Header. This needs to be an Element object returned via the querySelector() method or similar. If using a Spark Header, this does not need to be supplied. |
| scrolledToEl | Element | null | A single element that is used determine at which the point at which the Fixed Panel will be hidden or displayed. |
| customCondenseClass | string | null | A custom condense class that is applied to the component on scroll in place of the spark-panel--condensed |
For all available methods and full API, refer to the component code on Bitbucket.
Top Fixed Panel
<a class="spark-skip-nav" href="#mainContent">Skip Navigation</a>
<div class="spark-content__wrapper--sticky-footer">
<header class="spark-header">
<nav class="spark-header__nav" role="navigation">
<button class="spark-menu__toggle spark-header__toggle" aria-label="View Navigation" title="View Navigation">
<i class="spark-icon--fill spark-icon-menu-hamburger spark-icon--md"></i>
</button>
<span class="spark-header__logo"><i class="spark-logo spark-logo--sabre spark-logo--sm">Sabre</i></span>
<a href="#" class="spark-header__title">Product™</a>
<div class="spark-menu spark-header__menu" role="menu">
<div class="spark-menu__header">
<button class="spark-menu__toggle" aria-label="Hide Navigation" title="Hide Navigation">
<i class="spark-icon--fill spark-icon-close"></i>
</button>
<span class="spark-menu__title"></span>
</div>
<ul class="spark-menu__list spark-header__list spark-header__list--overflow">
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Dashboard</a>
</li>
<li class="spark-menu__list-item active" role="menuitem">
<span class="spark-menu__list-links">
<a href="#" class="spark-menu__list-link">Flight Analysis</a>
<button class="spark-menu__list-expand" role="menuitemcheckbox" aria-label="Expand or Collapse Menu" title="Expand"></button>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">First Level A</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<span class="spark-menu__list-links">
<a tabindex="0" class="spark-menu__list-link">First Level B</a>
<a tabindex="0" class="spark-menu__list-expand" role="menuitemcheckbox" title="Expand"></a>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Second Level a</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<span class="spark-menu__list-links">
<a tabindex="0" class="spark-menu__list-link spark-menu__list-expand" role="menuitemcheckbox">Second Level b</a>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Third-level Item I</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Third-level Item II</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Third-level Item III</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Third-level Item IV</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Second Level c</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Second Level d</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item active" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Sample Single Panel Form Page</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link spark-menu__list-expand" role="menuitemcheckbox">First Level D</a>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Second Level aa</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Second Level bb</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Second Level cc</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="spark-menu__list-item" role="menuitem">
<span class="spark-menu__list-links">
<a href="#" class="spark-menu__list-link">Market Analysis</a>
<button class="spark-menu__list-expand" role="menuitemcheckbox" aria-label="Expand or Collapse Menu" title="Expand"></button>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Menu Option 1</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<span class="spark-menu__list-links">
<a href="#" class="spark-menu__list-link">Menu Option 2</a>
<button class="spark-menu__list-expand" role="menuitemcheckbox" aria-label="Expand or Collapse Menu" title="Expand"></button>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 1</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 2</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 3</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 4 That Has A Really Long Title</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Menu Option 3</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link"><i aria-hidden="true" class="spark-icon-announce"></i> Menu Option 4 w/ Icon</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Menu Option 5 w/ A Really Long Title</a>
</li>
<li class="spark-header__list-cta">
<a href="#" class="spark-header__list-cta-link">View All Analyses</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 8</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 9</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 10</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 11</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 12</a>
</li>
</ul>
<ul class="spark-menu__list">
<li class="spark-menu__list-item spark-menu__list-item--secondary" role="menuitem">
<a href="#" class="spark-menu__list-link spark-menu__ignore" aria-label="Search">
<i class="spark-icon--fill spark-icon-search spark-icon--md"></i>
<span class="spark-header__collapsed-show">Search</span>
</a>
</li>
<li class="spark-menu__list-item spark-menu__list-item--secondary" role="menuitem">
<a href="#" class="spark-menu__list-link spark-menu__ignore" aria-label="Account Settings">
<i class="spark-icon--fill spark-icon-cog spark-icon--md"></i>
<span class="spark-header__collapsed-show">Account Settings</span>
</a>
</li>
</ul>
</div>
<div class="spark-header__sign-in spark-popover">
<a href="#" class="spark-menu__list-link spark-popover__toggle">Sign In</a>
<form class="spark-popover__content--bottom col-xs-8 col-md-4" role="tooltip" onsubmit="return false;" data-anchor-x="right">
<a href="#" class="spark-popover__close" title="Close"></a>
<h4>Account Sign In</h4>
<label class="spark-input spark-mar-t-1">
<input class="spark-input__field" name="username" role="textbox">
<span class="spark-label">Username</span>
</label>
<label class="spark-input">
<input class="spark-input__field" name="password" type="password" role="textbox">
<span class="spark-label">Password</span>
</label>
<button class="spark-btn spark-btn--md spark-btn--block">Sign In</button>
<div class="spark-text-center spark-mar-t-1">
<a href="#example-link" class="spark-link spark-zeta">Forgot username or password?</a>
</div>
<span class="spark-popover__caret"></span>
</form>
</div>
</nav>
</header>
<div class="spark-panel--fixed">
<div class="summary-bar">
<div class="row">
<div class="col-xs-6 summary-bar--pod">
<div class="spark-align-items-center spark-flex">
<span aria-hidden="true" class="spark-icon spark-icon-airplane spark-icon--lg spark-mar-r-2 spark-hidden--xs"></span>
<div>
<div class="spark-flex spark-align-items-center">
<span class="summary-label">DFW</span>
<span aria-label="to" class="spark-icon spark-icon-arrow-basic-right"></span>
<span class="summary-label">SFO</span>
</div>
<span class="summary-detail spark-block spark-mar-t-.5--gte-sm">Sep 23 – 30, Roundtrip</span>
</div>
</div>
</div>
<div class="col-xs-6 summary-bar--pod spark-flex spark-align-items-center flex-items-xs-right">
<div>
<span>1,230.23</span> USD
</div>
</div>
</div>
</div>
</div>
<main class="spark-main--sticky-footer" id="mainContent">
<div class="container">
<div class="row spark-mar-b-2 spark-mar-t-2">
<div class="col-xs-12">
<h1>Page Title</h1>
</div>
<section class="spark-table spark-table--condensed col-xs-12">
<header class="spark-table__header">
<h4 class="spark-table__title">
Table Title
</h4>
</header>
<div class="spark-table__scroll">
<table role="grid">
<thead>
<tr>
<td class="spark-table__select-all spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select all rows</span>
</label>
</td>
<th class="spark-text-center">
Icon
</th>
<th data-sort="asc" tabindex="0">
Flight <span aria-label="Number">No.</span>
</th>
<th data-sort tabindex="0">
Departure <span class="spark-hidden--lte-md">Time</span>
</th>
<th data-sort tabindex="0">
Arrival <span class="spark-hidden--lte-md">Time</span>
</th>
<th class="spark-text-center">
Actions
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</div>
</main>
<footer class="spark-footer">
<div class="container">
<a class="spark-footer__logo spark-hidden--lte-sm" title="Sabre"><i class="spark-logo spark-logo--sabre spark-logo--xs"></i></a>
<div class="spark-footer__content">
<div class="spark-footer__copyright">
© 2015-16 Sabre <span class="spark-hidden--lte-md">Curabitur blandit tempus porttitor.</span>
</div>
<ul class="spark-footer__list">
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" href="javascript: void(0);">
Legal Policy
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" href="javascript: void(0);">
Contact Us
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" href="javascript: void(0);">
Support
</a>
</li>
</ul>
</div>
<ul class="spark-footer__list spark-footer__list--right spark-footer__list--icons">
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="Twitter" title="Twitter">
<i class="spark-icon-social-twitter spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="Facebook" title="Facebook">
<i class="spark-icon-social-facebook spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="LinkedIn" title="LinkedIn">
<i class="spark-icon-social-linkedin spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="Instagram" title="Instagram">
<i class="spark-icon-social-instagram spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="YouTube" title="YouTube">
<i class="spark-icon-social-youtube spark-icon--fill"></i>
</a>
</li>
</ul>
</div>
</footer>
</div>
<style type="text/css">
.white-bg {
background-color: #ffffff;
}
</style>
<style type="text/css">
.summary-bar {
background: #fff;
padding: 1rem;
}
@media (min-width: 544px) {
.summary-bar {
padding: 1rem 2rem;
}
}
.summary-bar--pod:last-child {
color: #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" aria-label="View Navigation" title="View Navigation">
<i class="spark-icon--fill spark-icon-menu-hamburger spark-icon--md"></i>
</button>
<span class="spark-header__logo"><i class="spark-logo spark-logo--sabre spark-logo--sm">Sabre</i></span>
<a href="#" class="spark-header__title">Product™</a>
<div class="spark-menu spark-header__menu" role="menu">
<div class="spark-menu__header">
<button class="spark-menu__toggle" aria-label="Hide Navigation" title="Hide Navigation">
<i class="spark-icon--fill spark-icon-close"></i>
</button>
<span class="spark-menu__title"></span>
</div>
<ul class="spark-menu__list spark-header__list spark-header__list--overflow">
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Dashboard</a>
</li>
<li class="spark-menu__list-item active" role="menuitem">
<span class="spark-menu__list-links">
<a href="#" class="spark-menu__list-link">Flight Analysis</a>
<button class="spark-menu__list-expand" role="menuitemcheckbox" aria-label="Expand or Collapse Menu" title="Expand"></button>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">First Level A</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<span class="spark-menu__list-links">
<a tabindex="0" class="spark-menu__list-link">First Level B</a>
<a tabindex="0" class="spark-menu__list-expand" role="menuitemcheckbox" title="Expand"></a>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Second Level a</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<span class="spark-menu__list-links">
<a tabindex="0" class="spark-menu__list-link spark-menu__list-expand" role="menuitemcheckbox">Second Level b</a>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Third-level Item I</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Third-level Item II</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Third-level Item III</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Third-level Item IV</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Second Level c</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Second Level d</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item active" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Sample Single Panel Form Page</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link spark-menu__list-expand" role="menuitemcheckbox">First Level D</a>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Second Level aa</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Second Level bb</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Second Level cc</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="spark-menu__list-item" role="menuitem">
<span class="spark-menu__list-links">
<a href="#" class="spark-menu__list-link">Market Analysis</a>
<button class="spark-menu__list-expand" role="menuitemcheckbox" aria-label="Expand or Collapse Menu" title="Expand"></button>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Menu Option 1</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<span class="spark-menu__list-links">
<a href="#" class="spark-menu__list-link">Menu Option 2</a>
<button class="spark-menu__list-expand" role="menuitemcheckbox" aria-label="Expand or Collapse Menu" title="Expand"></button>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 1</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 2</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 3</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 4 That Has A Really Long Title</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Menu Option 3</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link"><i aria-hidden="true" class="spark-icon-announce"></i> Menu Option 4 w/ Icon</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Menu Option 5 w/ A Really Long Title</a>
</li>
<li class="spark-header__list-cta">
<a href="#" class="spark-header__list-cta-link">View All Analyses</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 8</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 9</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 10</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 11</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 12</a>
</li>
</ul>
<ul class="spark-menu__list">
<li class="spark-menu__list-item spark-menu__list-item--secondary" role="menuitem">
<a href="#" class="spark-menu__list-link spark-menu__ignore" aria-label="Search">
<i class="spark-icon--fill spark-icon-search spark-icon--md"></i>
<span class="spark-header__collapsed-show">Search</span>
</a>
</li>
<li class="spark-menu__list-item spark-menu__list-item--secondary" role="menuitem">
<a href="#" class="spark-menu__list-link spark-menu__ignore" aria-label="Account Settings">
<i class="spark-icon--fill spark-icon-cog spark-icon--md"></i>
<span class="spark-header__collapsed-show">Account Settings</span>
</a>
</li>
</ul>
</div>
<div class="spark-header__sign-in spark-popover">
<a href="#" class="spark-menu__list-link spark-popover__toggle">Sign In</a>
<form class="spark-popover__content--bottom col-xs-8 col-md-4" role="tooltip" onsubmit="return false;" data-anchor-x="right">
<a href="#" class="spark-popover__close" title="Close"></a>
<h4>Account Sign In</h4>
<label class="spark-input spark-mar-t-1">
<input class="spark-input__field" name="username" role="textbox">
<span class="spark-label">Username</span>
</label>
<label class="spark-input">
<input class="spark-input__field" name="password" type="password" role="textbox">
<span class="spark-label">Password</span>
</label>
<button class="spark-btn spark-btn--md spark-btn--block">Sign In</button>
<div class="spark-text-center spark-mar-t-1">
<a href="#example-link" class="spark-link spark-zeta">Forgot username or password?</a>
</div>
<span class="spark-popover__caret"></span>
</form>
</div>
</nav>
</header>
<div class="spark-panel--fixed" data-hide-on-scroll>
<div class="summary-bar">
<div class="row">
<div class="col-xs-6 summary-bar--pod">
<div class="spark-align-items-center spark-flex">
<span aria-hidden="true" class="spark-icon spark-icon-airplane spark-icon--lg spark-mar-r-2 spark-hidden--xs"></span>
<div>
<div class="spark-flex spark-align-items-center">
<span class="summary-label">DFW</span>
<span aria-label="to" class="spark-icon spark-icon-arrow-basic-right"></span>
<span class="summary-label">SFO</span>
</div>
<span class="summary-detail spark-block spark-mar-t-.5--gte-sm">Sep 23 – 30, Roundtrip</span>
</div>
</div>
</div>
<div class="col-xs-6 summary-bar--pod spark-flex spark-align-items-center flex-items-xs-right">
<div>
<span>1,230.23</span> USD
</div>
</div>
</div>
</div>
</div>
<main class="spark-main--sticky-footer" id="mainContent">
<div class="container">
<div class="row spark-mar-b-2 spark-mar-t-2">
<div class="col-xs-12">
<h1>Page Title</h1>
</div>
<section class="spark-table spark-table--condensed col-xs-12">
<header class="spark-table__header">
<h4 class="spark-table__title">
Table Title
</h4>
</header>
<div class="spark-table__scroll">
<table role="grid">
<thead>
<tr>
<td class="spark-table__select-all spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select all rows</span>
</label>
</td>
<th class="spark-text-center">
Icon
</th>
<th data-sort="asc" tabindex="0">
Flight <span aria-label="Number">No.</span>
</th>
<th data-sort tabindex="0">
Departure <span class="spark-hidden--lte-md">Time</span>
</th>
<th data-sort tabindex="0">
Arrival <span class="spark-hidden--lte-md">Time</span>
</th>
<th class="spark-text-center">
Actions
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</div>
</main>
<footer class="spark-footer">
<div class="container">
<a class="spark-footer__logo spark-hidden--lte-sm" title="Sabre"><i class="spark-logo spark-logo--sabre spark-logo--xs"></i></a>
<div class="spark-footer__content">
<div class="spark-footer__copyright">
© 2015-16 Sabre <span class="spark-hidden--lte-md">Curabitur blandit tempus porttitor.</span>
</div>
<ul class="spark-footer__list">
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" href="javascript: void(0);">
Legal Policy
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" href="javascript: void(0);">
Contact Us
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" href="javascript: void(0);">
Support
</a>
</li>
</ul>
</div>
<ul class="spark-footer__list spark-footer__list--right spark-footer__list--icons">
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="Twitter" title="Twitter">
<i class="spark-icon-social-twitter spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="Facebook" title="Facebook">
<i class="spark-icon-social-facebook spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="LinkedIn" title="LinkedIn">
<i class="spark-icon-social-linkedin spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="Instagram" title="Instagram">
<i class="spark-icon-social-instagram spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="YouTube" title="YouTube">
<i class="spark-icon-social-youtube spark-icon--fill"></i>
</a>
</li>
</ul>
</div>
</footer>
</div>
<style type="text/css">
.white-bg {
background-color: #ffffff;
}
</style>
<style type="text/css">
.summary-bar {
background: #fff;
padding: 1rem;
}
@media (min-width: 544px) {
.summary-bar {
padding: 1rem 2rem;
}
}
.summary-bar--pod:last-child {
color: #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" aria-label="View Navigation" title="View Navigation">
<i class="spark-icon--fill spark-icon-menu-hamburger spark-icon--md"></i>
</button>
<span class="spark-header__logo"><i class="spark-logo spark-logo--sabre spark-logo--sm">Sabre</i></span>
<a href="#" class="spark-header__title">Product™</a>
<div class="spark-menu spark-header__menu" role="menu">
<div class="spark-menu__header">
<button class="spark-menu__toggle" aria-label="Hide Navigation" title="Hide Navigation">
<i class="spark-icon--fill spark-icon-close"></i>
</button>
<span class="spark-menu__title"></span>
</div>
<ul class="spark-menu__list spark-header__list spark-header__list--overflow">
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Dashboard</a>
</li>
<li class="spark-menu__list-item active" role="menuitem">
<a href="#" class="spark-menu__list-link">Flight Analysis</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<span class="spark-menu__list-links">
<a href="#" class="spark-menu__list-link">Market Analysis</a>
<button class="spark-menu__list-expand" role="menuitemcheckbox" aria-label="Expand or Collapse Menu" title="Expand"></button>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Menu Option 1</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<span class="spark-menu__list-links">
<a href="#" class="spark-menu__list-link">Menu Option 2</a>
<button class="spark-menu__list-expand" role="menuitemcheckbox" aria-label="Expand or Collapse Menu" title="Expand"></button>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 1</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 2</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 3</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 4 That Has A Really Long Title</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Menu Option 3</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link"><i aria-hidden="true" class="spark-icon-announce"></i> Menu Option 4 w/ Icon</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Menu Option 5 w/ A Really Long Title</a>
</li>
<li class="spark-menu__list-item spark-header__list-cta" role="menuitem">
<a href="#" class="spark-header__list-cta-link">View All Analyses</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 8</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 9</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 10</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 11</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 12</a>
</li>
</ul>
<ul class="spark-menu__list">
<li class="spark-menu__list-item spark-menu__list-item--secondary" role="menuitem">
<a href="#" class="spark-menu__list-link spark-menu__ignore" aria-label="Search">
<i class="spark-icon--fill spark-icon-search spark-icon--md"></i>
<span class="spark-header__collapsed-show">Search</span>
</a>
</li>
<li class="spark-menu__list-item spark-menu__list-item--secondary" role="menuitem">
<a href="#" class="spark-menu__list-link spark-menu__ignore" aria-label="Account Settings">
<i class="spark-icon--fill spark-icon-cog spark-icon--md"></i>
<span class="spark-header__collapsed-show">Account Settings</span>
</a>
</li>
</ul>
</div>
<div class="spark-header__sign-in spark-popover">
<a href="#" class="spark-menu__list-link spark-popover__toggle">Sign In</a>
<form class="spark-popover__content--bottom col-xs-8 col-md-4" role="tooltip" onsubmit="return false;" data-anchor-x="right">
<a href="#" class="spark-popover__close" title="Close"></a>
<h4>Account Sign In</h4>
<label class="spark-input spark-mar-t-1">
<input class="spark-input__field" name="username" role="textbox">
<span class="spark-label">Username</span>
</label>
<label class="spark-input">
<input class="spark-input__field" name="password" type="password" role="textbox">
<span class="spark-label">Password</span>
</label>
<button class="spark-btn spark-btn--md spark-btn--block">Sign In</button>
<div class="spark-text-center spark-mar-t-1">
<a href="#example-link" class="spark-link spark-zeta">Forgot username or password?</a>
</div>
<span class="spark-popover__caret"></span>
</form>
</div>
</nav>
</header>
<div class="spark-panel--fixed container-fluid">
<div class="row spark-summary-bar spark-pad-1 spark-pad-r-0--xs spark-pad-l-0--xs">
<div class="col-xs-6">
<div class="spark-align-items-center spark-flex">
<span aria-hidden="true" class="spark-icon spark-icon-airplane spark-icon--lg spark-mar-r-2 spark-hidden--xs"></span>
<div>
<div class="spark-flex spark-align-items-center">
<span class="spark-summary-bar__title">DFW</span>
<span class="spark-icon spark-icon-arrow-basic-right" aria-label="to"></span>
<span class="spark-summary-bar__title">SFO</span>
</div>
<span class="spark-summary-bar__subtitle spark-block">Sep 23 – 30, Roundtrip</span>
</div>
</div>
</div>
<div class="col-xs-6 spark-flex spark-align-items-center flex-items-xs-right">
<div class="spark-summary-bar__price">
<span class="spark-summary-bar__amount">1,230.23</span> USD
</div>
</div>
</div>
</div>
<main id="mainContent">
<div class="container">
<div class="row spark-mar-b-2 spark-mar-t-2">
<div class="col-xs-12 col-lg-4 spark-hidden--lte-md">
<div class="row spark-mar-t-0 spark-mar-l-0 spark-mar-r-0 spark-mar-b-2 spark-pad-0">
<div class="spark-panel spark-pad-2" data-toast="filter">
<div class="row">
<div class="col-lg-12">
<h3>Side Panel</h3>
</div>
</div>
<h4>Panel Headline</h4>
<fieldset class="row spark-mar-b-1">
<label class="col-xs-12 spark-checkbox">
<input class="spark-checkbox__input" type="checkbox" checked="">
<span class="spark-checkbox__box"></span> <span class="spark-label">Label 1</span>
</label>
<label class="col-xs-12 spark-checkbox">
<input class="spark-checkbox__input" type="checkbox" checked="">
<span class="spark-checkbox__box"></span> <span class="spark-label">Label 2</span>
</label>
<label class="col-xs-12 spark-checkbox">
<input class="spark-checkbox__input" type="checkbox" checked="">
<span class="spark-checkbox__box"></span> <span class="spark-label">Label 3</span>
</label>
<label class="col-xs-12 spark-checkbox">
<input class="spark-checkbox__input" type="checkbox" checked="">
<span class="spark-checkbox__box"></span> <span class="spark-label">Label 4</span>
</label>
</fieldset>
<h4>Panel Headline <span class="spark-thin">(Optional)</span></h4>
<p class="spark-mar-b-1">Panel headline description.</p>
<fieldset class="spark-multi-select spark-mar-b-2" aria-label="Select Options" size="4">
<fieldset class="spark-multi-select__container spark-pad-1">
<label class="spark-checkbox">
<input class="spark-checkbox__input" type="checkbox" checked="">
<span class="spark-checkbox__box"></span> <span class="spark-label">Program 1</span>
</label>
<label class="spark-checkbox">
<input class="spark-checkbox__input" type="checkbox" checked="">
<span class="spark-checkbox__box"></span> <span class="spark-label">Program 2</span>
</label>
<label class="spark-checkbox">
<input class="spark-checkbox__input" type="checkbox" checked="">
<span class="spark-checkbox__box"></span> <span class="spark-label">Program 3</span>
</label>
<label class="spark-checkbox">
<input class="spark-checkbox__input" type="checkbox" checked="">
<span class="spark-checkbox__box"></span> <span class="spark-label">Program 4</span>
</label>
<label class="spark-checkbox">
<input class="spark-checkbox__input" type="checkbox" checked="">
<span class="spark-checkbox__box"></span> <span class="spark-label">Program 5</span>
</label>
<label class="spark-checkbox">
<input class="spark-checkbox__input" type="checkbox" checked="">
<span class="spark-checkbox__box"></span> <span class="spark-label">Program 6</span>
</label>
</fieldset>
</fieldset>
<h4>Panel Headline <span class="spark-thin">(Optional)</span></h4>
<div class="spark-range-slider spark-slider--primary spark-mar-b-2">
<p class="spark-mar-b-1">Panel headline description.</p>
<input type="number" min="0" max="100" value="0" title="Start">
<span class="spark-range-slider__input-divider"></span>
<input type="number" min="0" max="100" value="100" title="End">
<div class="spark-slider__controls">
<button class="spark-slider__handle" title="Start" data-value="0" style="left: 3%;"></button>
<button class="spark-slider__handle" title="End" data-value="100" style="left: 97%;"></button>
<span class="spark-slider__track"> <span class="spark-slider__track-fill" style="width: 100%; left: 0%;"></span> </span>
</div>
</div>
<button class="spark-btn spark-btn--md spark-btn--block spark-mar-t-2" data-button="filter">Display Toast</button>
</div>
</div>
</div>
<div class="col-xs-12 col-lg-8">
<div class="row">
<div class="col-xs-12">
<h1>Single Panel Page</h1>
</div>
<div class="col-xs-12">
<div class="spark-panel spark-mar-t-1" data-toast="panel">
<div class="spark-panel__content">
<section>
<h2>Panel Heading</h2>
<p>
Lorem ipsum Aliqua occaecat voluptate qui sint occaecat in laboris amet dolor ea aliquip qui in quis ullamco non commodo est sit laborum aliqua ex do incididunt.
</p>
<p>
Duis elit laborum cupidatat do cillum nulla est culpa elit cillum culpa in culpa velit nisi commodo commodo sit Duis magna irure anim enim nisi mollit sit et enim adipisicing aute sed proident consequat proident ullamco consectetur fugiat dolore culpa deserunt veniam eu magna dolor proident tempor aliqua dolor officia enim.
</p>
</section>
<hr />
<section>
<h3>Sub-Section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae perferendis eligendi deserunt optio, voluptatum et amet obcaecati at, earum eos veritatis quaerat ullam ad, quisquam consequuntur velit nihil maxime recusandae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos impedit dolorum rem magnam veniam eligendi, quas deserunt inventore perspiciatis. Veniam non sequi distinctio illum, eum quod vel sunt alias consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ut sed similique deserunt molestias temporibus soluta rem placeat libero et, enim eius repudiandae corporis iusto. Assumenda consectetur nihil, enim libero.</p>
<nav class="spark-btn-group spark-mar-t-2">
<div class="spark-btn-group-secondary">
<button class="spark-btn spark-btn--md spark-btn--secondary spark-modal__dismiss" data-button='warning'>Warning</button>
<button class="spark-btn spark-btn--md spark-btn--secondary" data-button='neutral'>Neutral</button>
</div>
<button class="spark-btn spark-btn--md spark-btn-group-primary" data-button='success'>Success</button>
</nav>
</section>
</div>
</div>
</div>
</div>
<div class="row" data-example-id="hide-fixed-panel">
<div class="col-xs-12">
<div class="spark-panel spark-mar-t-1" data-toast="panel">
<div class="spark-panel__content">
<section>
<h2>Hide Fixed Panel Here</h2>
<p>
Lorem ipsum Aliqua occaecat voluptate qui sint occaecat in laboris amet dolor ea aliquip qui in quis ullamco non commodo est sit laborum aliqua ex do incididunt.
</p>
<p>
Duis elit laborum cupidatat do cillum nulla est culpa elit cillum culpa in culpa velit nisi commodo commodo sit Duis magna irure anim enim nisi mollit sit et enim adipisicing aute sed proident consequat proident ullamco consectetur fugiat dolore culpa deserunt veniam eu magna dolor proident tempor aliqua dolor officia enim.
</p>
</section>
<hr />
<section>
<h3>Sub-Section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae perferendis eligendi deserunt optio, voluptatum et amet obcaecati at, earum eos veritatis quaerat ullam ad, quisquam consequuntur velit nihil maxime recusandae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos impedit dolorum rem magnam veniam eligendi, quas deserunt inventore perspiciatis. Veniam non sequi distinctio illum, eum quod vel sunt alias consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ut sed similique deserunt molestias temporibus soluta rem placeat libero et, enim eius repudiandae corporis iusto. Assumenda consectetur nihil, enim libero.</p>
<nav class="spark-btn-group spark-mar-t-2">
<div class="spark-btn-group-secondary">
<button class="spark-btn spark-btn--md spark-btn--secondary spark-modal__dismiss" data-button='warning'>Warning</button>
<button class="spark-btn spark-btn--md spark-btn--secondary" data-button='neutral'>Neutral</button>
</div>
<button class="spark-btn spark-btn--md spark-btn-group-primary" data-button='success'>Success</button>
</nav>
</section>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="spark-panel spark-mar-t-1" data-toast="panel">
<div class="spark-panel__content">
<section>
<h2>Panel Heading</h2>
<p>
Lorem ipsum Aliqua occaecat voluptate qui sint occaecat in laboris amet dolor ea aliquip qui in quis ullamco non commodo est sit laborum aliqua ex do incididunt.
</p>
<p>
Duis elit laborum cupidatat do cillum nulla est culpa elit cillum culpa in culpa velit nisi commodo commodo sit Duis magna irure anim enim nisi mollit sit et enim adipisicing aute sed proident consequat proident ullamco consectetur fugiat dolore culpa deserunt veniam eu magna dolor proident tempor aliqua dolor officia enim.
</p>
</section>
<hr />
<section>
<h3>Sub-Section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae perferendis eligendi deserunt optio, voluptatum et amet obcaecati at, earum eos veritatis quaerat ullam ad, quisquam consequuntur velit nihil maxime recusandae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos impedit dolorum rem magnam veniam eligendi, quas deserunt inventore perspiciatis. Veniam non sequi distinctio illum, eum quod vel sunt alias consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ut sed similique deserunt molestias temporibus soluta rem placeat libero et, enim eius repudiandae corporis iusto. Assumenda consectetur nihil, enim libero.</p>
<nav class="spark-btn-group spark-mar-t-2">
<div class="spark-btn-group-secondary">
<button class="spark-btn spark-btn--md spark-btn--secondary spark-modal__dismiss" data-button='warning'>Warning</button>
<button class="spark-btn spark-btn--md spark-btn--secondary" data-button='neutral'>Neutral</button>
</div>
<button class="spark-btn spark-btn--md spark-btn-group-primary" data-button='success'>Success</button>
</nav>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="spark-footer">
<div class="container">
<a class="spark-footer__logo spark-hidden--lte-sm" title="Sabre"><i class="spark-logo spark-logo--sabre spark-logo--xs"></i></a>
<div class="spark-footer__content">
<div class="spark-footer__copyright">
© 2015-16 Sabre <span class="spark-hidden--lte-md">Curabitur blandit tempus porttitor.</span>
</div>
<ul class="spark-footer__list">
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" href="javascript: void(0);">
Legal Policy
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" href="javascript: void(0);">
Contact Us
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" href="javascript: void(0);">
Support
</a>
</li>
</ul>
</div>
<ul class="spark-footer__list spark-footer__list--right spark-footer__list--icons">
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="Twitter" title="Twitter">
<i class="spark-icon-social-twitter spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="Facebook" title="Facebook">
<i class="spark-icon-social-facebook spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="LinkedIn" title="LinkedIn">
<i class="spark-icon-social-linkedin spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="Instagram" title="Instagram">
<i class="spark-icon-social-instagram spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="YouTube" title="YouTube">
<i class="spark-icon-social-youtube spark-icon--fill"></i>
</a>
</li>
</ul>
</div>
</footer>
<style type="text/css">
.summary-bar {
background: #fff;
padding: 1rem;
}
@media (min-width: 544px) {
.summary-bar {
padding: 1rem 2rem;
}
}
.summary-bar--pod:last-child {
color: #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 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" aria-label="View Navigation" title="View Navigation">
<i class="spark-icon--fill spark-icon-menu-hamburger spark-icon--md"></i>
</button>
<span class="spark-header__logo"><i class="spark-logo spark-logo--sabre spark-logo--sm">Sabre</i></span>
<a href="#" class="spark-header__title">Product™</a>
<div class="spark-menu spark-header__menu" role="menu">
<div class="spark-menu__header">
<button class="spark-menu__toggle" aria-label="Hide Navigation" title="Hide Navigation">
<i class="spark-icon--fill spark-icon-close"></i>
</button>
<span class="spark-menu__title"></span>
</div>
<ul class="spark-menu__list spark-header__list spark-header__list--overflow">
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Dashboard</a>
</li>
<li class="spark-menu__list-item active" role="menuitem">
<span class="spark-menu__list-links">
<a href="#" class="spark-menu__list-link">Flight Analysis</a>
<button class="spark-menu__list-expand" role="menuitemcheckbox" aria-label="Expand or Collapse Menu" title="Expand"></button>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">First Level A</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<span class="spark-menu__list-links">
<a tabindex="0" class="spark-menu__list-link">First Level B</a>
<a tabindex="0" class="spark-menu__list-expand" role="menuitemcheckbox" title="Expand"></a>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Second Level a</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<span class="spark-menu__list-links">
<a tabindex="0" class="spark-menu__list-link spark-menu__list-expand" role="menuitemcheckbox">Second Level b</a>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Third-level Item I</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Third-level Item II</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Third-level Item III</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Third-level Item IV</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Second Level c</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Second Level d</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item active" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Sample Single Panel Form Page</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link spark-menu__list-expand" role="menuitemcheckbox">First Level D</a>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Second Level aa</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Second Level bb</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a tabindex="0" class="spark-menu__list-link">Second Level cc</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="spark-menu__list-item" role="menuitem">
<span class="spark-menu__list-links">
<a href="#" class="spark-menu__list-link">Market Analysis</a>
<button class="spark-menu__list-expand" role="menuitemcheckbox" aria-label="Expand or Collapse Menu" title="Expand"></button>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Menu Option 1</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<span class="spark-menu__list-links">
<a href="#" class="spark-menu__list-link">Menu Option 2</a>
<button class="spark-menu__list-expand" role="menuitemcheckbox" aria-label="Expand or Collapse Menu" title="Expand"></button>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 1</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 2</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 3</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 4 That Has A Really Long Title</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Menu Option 3</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link"><i aria-hidden="true" class="spark-icon-announce"></i> Menu Option 4 w/ Icon</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Menu Option 5 w/ A Really Long Title</a>
</li>
<li class="spark-header__list-cta">
<a href="#" class="spark-header__list-cta-link">View All Analyses</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 8</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 9</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 10</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 11</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 12</a>
</li>
</ul>
<ul class="spark-menu__list">
<li class="spark-menu__list-item spark-menu__list-item--secondary" role="menuitem">
<a href="#" class="spark-menu__list-link spark-menu__ignore" aria-label="Search">
<i class="spark-icon--fill spark-icon-search spark-icon--md"></i>
<span class="spark-header__collapsed-show">Search</span>
</a>
</li>
<li class="spark-menu__list-item spark-menu__list-item--secondary" role="menuitem">
<a href="#" class="spark-menu__list-link spark-menu__ignore" aria-label="Account Settings">
<i class="spark-icon--fill spark-icon-cog spark-icon--md"></i>
<span class="spark-header__collapsed-show">Account Settings</span>
</a>
</li>
</ul>
</div>
<div class="spark-header__sign-in spark-popover">
<a href="#" class="spark-menu__list-link spark-popover__toggle">Sign In</a>
<form class="spark-popover__content--bottom col-xs-8 col-md-4" role="tooltip" onsubmit="return false;" data-anchor-x="right">
<a href="#" class="spark-popover__close" title="Close"></a>
<h4>Account Sign In</h4>
<label class="spark-input spark-mar-t-1">
<input class="spark-input__field" name="username" role="textbox">
<span class="spark-label">Username</span>
</label>
<label class="spark-input">
<input class="spark-input__field" name="password" type="password" role="textbox">
<span class="spark-label">Password</span>
</label>
<button class="spark-btn spark-btn--md spark-btn--block">Sign In</button>
<div class="spark-text-center spark-mar-t-1">
<a href="#example-link" class="spark-link spark-zeta">Forgot username or password?</a>
</div>
<span class="spark-popover__caret"></span>
</form>
</div>
</nav>
</header>
<main class="spark-main--sticky-footer" id="mainContent">
<div class="container">
<div class="row spark-mar-b-2 spark-mar-t-2">
<div class="col-xs-12">
<h1>Page Title</h1>
</div>
<section class="spark-table spark-table--condensed col-xs-12">
<header class="spark-table__header">
<h4 class="spark-table__title">
Table Title
</h4>
</header>
<div class="spark-table__scroll">
<table role="grid">
<thead>
<tr>
<td class="spark-table__select-all spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select all rows</span>
</label>
</td>
<th class="spark-text-center">
Icon
</th>
<th data-sort="asc" tabindex="0">
Flight <span aria-label="Number">No.</span>
</th>
<th data-sort tabindex="0">
Departure <span class="spark-hidden--lte-md">Time</span>
</th>
<th data-sort tabindex="0">
Arrival <span class="spark-hidden--lte-md">Time</span>
</th>
<th class="spark-text-center">
Actions
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
DL0431
</td>
<td>
<time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
</td>
<td>
<time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0 spark-checkbox--sm">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane" aria-label="flight"></i>
</td>
<td>
AA1321
</td>
<td>
<time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
</td>
<td>
<time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
</td>
<td class="spark-table__actions spark-text-center">
<button class="spark-btn spark-btn--xs">Book Flight</button>
</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</div>
</main>
<div class="spark-panel--fixed" data-fixed-to-bottom>
<div class="spark-pad-1" style="background-color: #fff;">
<div class="row spark-align-items-center">
<div class="col-xs-12 col-sm-6 spark-mar-b-2--xs">
<p class="spark-delta" style="color: #4a5767">
<span class="spark-bold">23</span> items selected.
<a href="#" class="spark-zeta spark-mar-l-.5">Clear All</a>
</p>
</div>
<div class="col-xs-12 col-sm-6">
<nav class="spark-btn-group">
<button class="spark-btn spark-btn--md spark-btn-group-primary spark-btn--block-xs">Save Changes</button>
</nav>
</div>
</div>
</div>
</div>
</div>
<style type="text/css">
.white-bg {
background-color: #ffffff;
}
</style>
<style type="text/css">
</style>// Vanilla JS
var el = document.querySelector('.spark-panel--fixed');
var fixedPanel = new Spark.FixedPanel(el);Side Fixed Panels
A Side Fixed Panel is instantiated by passing the element with a class of spark-panel--fixed to new Spark.SideFixedPanel(el)
The following options may be passed when using new Spark.SideFixedPanel(el, {});:
| Name | Type | Default | Description |
|---|---|---|---|
| scrollTop | boolean | true | Whether or not to always open panel scrolled to the top. |
| mobileBreakpoint | boolean | String | The Spark breakpoint which cover panels should always go full width. |
| onOpen | function | noop() | A callback function run when a Side Fixed Panel has finished opening. |
| onClose | function | noop() | A callback function run when a Side Fixed Panel has finished closing. |
| onToggle | function | noop() | A callback function run when a Side Fixed Panel has finished transitioning after calling the toggle() method. |
| onDismiss | function | noop() | A callback function run anytime a Side Fixed Panel is dismissed. |
The open{} and close{} methods also return Promises.
For all available methods, click here to read the full API documentation
Side Fixed Panel with Cover
<header class="spark-header">
<nav class="spark-header__nav" role="navigation">
<button class="spark-menu__toggle spark-header__toggle" title="View Navigation">
<i class="spark-icon--fill spark-icon-menu-hamburger spark-icon--md"></i>
</button>
<span class="spark-header__logo"><i class="spark-logo spark-logo--sabre spark-logo--sm">Sabre</i></span>
<a href="#" class="spark-header__title">Product™</a>
<div class="spark-menu spark-header__menu" role="menu">
<div class="spark-menu__header">
<button class="spark-menu__toggle" title="Hide Navigation">
<i class="spark-icon--fill spark-icon-close"></i>
</button>
<span class="spark-menu__title"></span>
</div>
<ul class="spark-menu__list spark-header__list spark-header__list--overflow">
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Dashboard</a>
</li>
<li class="spark-menu__list-item active" role="menuitem">
<a href="#" class="spark-menu__list-link">Flight Analysis</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<span class="spark-menu__list-links">
<a href="#" class="spark-menu__list-link">Market Analysis</a>
<button class="spark-menu__list-expand" role="menuitemcheckbox" title="Expand"></button>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Menu Option 1</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<span class="spark-menu__list-links">
<a href="#" class="spark-menu__list-link">Menu Option 2</a>
<button class="spark-menu__list-expand" role="menuitemcheckbox" title="Expand"></button>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 1</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 2</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 3</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 4 That Has A Really Long Title</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Menu Option 3</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link"><i class="spark-icon-announce"></i> Menu Option 4 w/ Icon</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Menu Option 5 w/ A Really Long Title</a>
</li>
<li class="spark-menu__list-item spark-header__list-cta" role="menuitem">
<a href="#" class="spark-header__list-cta-link">View All Analyses</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 8</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 9</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 10</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 11</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 12</a>
</li>
</ul>
<ul class="spark-menu__list">
<li class="spark-menu__list-item spark-menu__list-item--secondary" role="menuitem">
<a href="#" class="spark-menu__list-link spark-menu__ignore">
<i class="spark-icon--fill spark-icon-search spark-icon--md"></i>
<span class="spark-header__collapsed-show">Search</span>
</a>
</li>
</ul>
</div>
<div class="spark-header__sign-in spark-popover">
<a href="#" class="spark-menu__list-link spark-popover__toggle">Sign In</a>
<form class="spark-popover__content--bottom col-xs-8 col-md-4" role="tooltip" onsubmit="return false;" data-anchor-x="right">
<a href="#" class="spark-popover__close" title="Close"></a>
<h4>Account Sign In</h4>
<label class="spark-input spark-mar-t-1">
<input class="spark-input__field" name="username" role="textbox">
<span class="spark-label">Username</span>
</label>
<label class="spark-input">
<input class="spark-input__field" name="password" type="password" role="textbox">
<span class="spark-label">Password</span>
</label>
<button class="spark-btn spark-btn--md spark-btn--block">Sign In</button>
<div class="spark-text-center spark-mar-t-1">
<a href="#example-link" class="spark-link spark-zeta">Forgot username or password?</a>
</div>
<span class="spark-popover__caret"></span>
</form>
</div>
</nav>
</header>
<main id="mainContent">
<div class="container">
<div class="row spark-mar-b-2 spark-mar-t-2">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12">
<h1>Side Fixed Panel with Cover</h1>
</div>
<div class="col-xs-12">
<div class="spark-panel spark-mar-t-1">
<div class="spark-panel__content">
<section>
<h2>Panel Heading</h2>
<p>
Lorem ipsum Aliqua occaecat voluptate qui sint occaecat in laboris amet dolor ea aliquip qui in quis ullamco non commodo est sit laborum aliqua ex do incididunt.
</p>
<p>
Duis elit laborum cupidatat do cillum nulla est culpa elit cillum culpa in culpa velit nisi commodo commodo sit Duis magna irure anim enim nisi mollit sit et enim adipisicing aute sed proident consequat proident ullamco consectetur fugiat dolore culpa deserunt veniam eu magna dolor proident tempor aliqua dolor officia enim.
</p>
<nav class="spark-btn-group spark-mar-t-2">
<div class="spark-btn-group-secondary">
<button id="openLeft--cover" class="spark-btn spark-btn--md spark-btn--secondary" aria-controls="side-fixed-panel--cover" aria-expanded="false">Open Left</button>
</div>
<button id="openRight--cover" class="spark-btn spark-btn--md spark-btn-group-primary" aria-controls="side-fixed-panel--cover" aria-expanded="false">Open Right</button>
</nav>
</section>
<hr />
<section>
<h3>Sub-Section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae perferendis eligendi deserunt optio, voluptatum et amet obcaecati at, earum eos veritatis quaerat ullam ad, quisquam consequuntur velit nihil maxime recusandae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos impedit dolorum rem magnam veniam eligendi, quas deserunt inventore perspiciatis. Veniam non sequi distinctio illum, eum quod vel sunt alias consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ut sed similique deserunt molestias temporibus soluta rem placeat libero et, enim eius repudiandae corporis iusto. Assumenda consectetur nihil, enim libero.</p>
</section>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="spark-panel spark-mar-t-1">
<div class="spark-panel__content">
<section>
<h2>Panel Heading</h2>
<p>
Lorem ipsum Aliqua occaecat voluptate qui sint occaecat in laboris amet dolor ea aliquip qui in quis ullamco non commodo est sit laborum aliqua ex do incididunt.
</p>
<p>
Duis elit laborum cupidatat do cillum nulla est culpa elit cillum culpa in culpa velit nisi commodo commodo sit Duis magna irure anim enim nisi mollit sit et enim adipisicing aute sed proident consequat proident ullamco consectetur fugiat dolore culpa deserunt veniam eu magna dolor proident tempor aliqua dolor officia enim.
</p>
</section>
<hr />
<section>
<h3>Sub-Section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae perferendis eligendi deserunt optio, voluptatum et amet obcaecati at, earum eos veritatis quaerat ullam ad, quisquam consequuntur velit nihil maxime recusandae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos impedit dolorum rem magnam veniam eligendi, quas deserunt inventore perspiciatis. Veniam non sequi distinctio illum, eum quod vel sunt alias consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ut sed similique deserunt molestias temporibus soluta rem placeat libero et, enim eius repudiandae corporis iusto. Assumenda consectetur nihil, enim libero.</p>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<aside class="spark-panel--fixed copy-panel--example" aria-expanded="false" data-position="right" data-placement="cover" id="side-fixed-panel--cover" tabindex="-1">
<a class="spark-panel--fixed__close" aria-label="Close Panel" tabindex="0"></a>
<section>
<h2>Panel Heading</h2>
<p>
Lorem ipsum Aliqua occaecat voluptate qui sint occaecat in laboris amet dolor ea aliquip qui in quis ullamco non commodo est sit laborum aliqua ex do incididunt.
</p>
<p>
Duis elit laborum cupidatat do cillum nulla est culpa elit cillum culpa in culpa velit nisi commodo commodo sit Duis magna irure anim enim nisi mollit sit et enim adipisicing aute sed proident consequat proident ullamco consectetur fugiat dolore culpa deserunt veniam eu magna dolor proident tempor aliqua dolor officia enim.
</p>
</section>
<hr />
<section>
<h3>Sub-Section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae perferendis eligendi deserunt optio, voluptatum et amet obcaecati at, earum eos veritatis quaerat ullam ad, quisquam consequuntur velit nihil maxime recusandae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos impedit dolorum rem magnam veniam eligendi, quas deserunt inventore perspiciatis. Veniam non sequi distinctio illum, eum quod vel sunt alias consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ut sed similique deserunt molestias temporibus soluta rem placeat libero et, enim eius repudiandae corporis iusto. Assumenda consectetur nihil, enim libero.</p>
</section>
<hr />
<section>
<h3>Sub-Section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae perferendis eligendi deserunt optio, voluptatum et amet obcaecati at, earum eos veritatis quaerat ullam ad, quisquam consequuntur velit nihil maxime recusandae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos impedit dolorum rem magnam veniam eligendi, quas deserunt inventore perspiciatis. Veniam non sequi distinctio illum, eum quod vel sunt alias consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ut sed similique deserunt molestias temporibus soluta rem placeat libero et, enim eius repudiandae corporis iusto. Assumenda consectetur nihil, enim libero.</p>
</section>
<hr />
<section>
<h3>Sub-Section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae perferendis eligendi deserunt optio, voluptatum et amet obcaecati at, earum eos veritatis quaerat ullam ad, quisquam consequuntur velit nihil maxime recusandae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos impedit dolorum rem magnam veniam eligendi, quas deserunt inventore perspiciatis. Veniam non sequi distinctio illum, eum quod vel sunt alias consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ut sed similique deserunt molestias temporibus soluta rem placeat libero et, enim eius repudiandae corporis iusto. Assumenda consectetur nihil, enim libero.</p>
</section>
</aside>
<footer class="spark-footer">
<div class="container">
<a class="spark-footer__logo spark-hidden--lte-sm" title="Sabre"><i class="spark-logo spark-logo--sabre spark-logo--xs"></i></a>
<div class="spark-footer__content">
<div class="spark-footer__copyright">
© 2015-16 Sabre <span class="spark-hidden--lte-md">Curabitur blandit tempus porttitor.</span>
</div>
<ul class="spark-footer__list">
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" href="javascript: void(0);">
Legal Policy
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" href="javascript: void(0);">
Contact Us
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" href="javascript: void(0);">
Support
</a>
</li>
</ul>
</div>
<ul class="spark-footer__list spark-footer__list--right spark-footer__list--icons">
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="Twitter" title="Twitter">
<i class="spark-icon-social-twitter spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="Facebook" title="Facebook">
<i class="spark-icon-social-facebook spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="LinkedIn" title="LinkedIn">
<i class="spark-icon-social-linkedin spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="Instagram" title="Instagram">
<i class="spark-icon-social-instagram spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="YouTube" title="YouTube">
<i class="spark-icon-social-youtube spark-icon--fill"></i>
</a>
</li>
</ul>
</div>
</footer>
<style type="text/css">
.spark-panel__container {
align-content: flex-start;
align-items: stretch;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow: hidden;
position: relative;
}
.spark-panel__container .spark-panel__container__main {
flex: 1;
overflow-y: auto;
padding: 0 1rem;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
.spark-panel__container .spark-panel__container__main::-webkit-scrollbar {
display: none;
width: 0;
}
.spark-panel__container .spark-panel__container__panel.spark-panel--fixed[data-position][data-placement="push"] {
position: absolute;
top: 0;
}
.spark-panel__container .spark-panel__container__panel.spark-panel--fixed[data-position="left"][data-placement="push"] .spark-panel__container__panel__content {
right: 0;
}
.spark-panel__container .spark-panel__container__panel.spark-panel--fixed[data-position="right"][data-placement="push"] .spark-panel__container__panel__content {
left: 0;
}
.spark-panel--fixed[data-placement="cover"],
.spark-panel__container__panel[data-placement="cover"] {
padding: 5rem 1rem 2rem 1rem;
}
.spark-panel--fixed[data-placement="cover"].spark-panel--docked section:not(.spark-table),
.spark-panel__container__panel[data-placement="cover"].spark-panel--docked section:not(.spark-table) {
margin: auto 2rem 1rem;
}
.spark-panel--fixed[data-placement="cover"].spark-panel--docked hr,
.spark-panel__container__panel.spark-panel--docked hr {
margin-left: 2rem;
margin-right: 2rem;
}
.spark-panel--fixed .copy-panel--example:focus {
outline: none;
}
.spark-panel--fixed[data-placement="cover"].copy-panel--example {
padding: 1rem 2rem;
}
.spark-panel--fixed[data-placement="cover"].copy-panel--example h2 {
margin-top: 4rem;
}
.spark-panel--fixed[data-placement="cover"] .copy-panel--example h2,
.spark-panel__container__panel[data-placement="cover"] .copy-panel--example h2,
.spark-panel--fixed[data-placement="push"] .copy-panel--example h2,
.spark-panel__container__panel[data-placement="push"] .copy-panel--example h2 {
margin-top: 5rem;
}
.spark-panel--fixed[data-placement="push"],
.spark-panel__container__panel[data-placement="push"] {
max-height: calc(100vh - 84px - 61px);
}
.spark-panel--fixed[data-placement="push"] form,
.spark-panel__container__panel[data-placement="push"] form {
margin: 1rem 2rem auto 2rem;
}
.spark-panel--fixed[data-placement="push"] section,
.spark-panel__container__panel[data-placement="push"] section {
margin: auto 2rem 1rem;
}
.spark-panel--fixed[data-placement="push"] hr,
.spark-panel__container__panel[data-placement="push"] hr {
margin-left: 2rem;
margin-right: 2rem;
}
.spark-panel--fixed {
width: 365px;
}
@media screen and (max-width: 355px) {
.spark-panel--fixed {
width: 100%;
}
}
</style>var sideFixedPanelEl = document.querySelector('aside.spark-panel--fixed');
var sideFixedPanel = new Spark.SideFixedPanel(sideFixedPanelEl);
sideFixedPanel.on('open', function() {
sideFixedPanel.el.querySelector('.spark-panel--fixed .spark-panel--fixed__close').focus();
});
var openLeftButton = document.getElementById('openLeft--cover');
var openRightButton = document.getElementById('openRight--cover');
openLeftButton.addEventListener('click', function(e) {
e.preventDefault();
sideFixedPanel.open({
position: 'left',
underlay: false
});
return false;
});
openRightButton.addEventListener('click', function(e) {
e.preventDefault();
sideFixedPanel.open({
position: 'right',
underlay: false
});
return false;
});
sideFixedPanel.on('close', function() {
var openButton = sideFixedPanel.position === 'right' ? openRightButton : openLeftButton;
openButton.focus();
});See additional guidelines for important details about implementing this type of Side Fixed Panel in your application.
Side Fixed Panel with Cover and Underlay
<header class="spark-header">
<nav class="spark-header__nav" role="navigation">
<button class="spark-menu__toggle spark-header__toggle" title="View Navigation">
<i class="spark-icon--fill spark-icon-menu-hamburger spark-icon--md"></i>
</button>
<span class="spark-header__logo"><i class="spark-logo spark-logo--sabre spark-logo--sm">Sabre</i></span>
<a href="#" class="spark-header__title">Product™</a>
<div class="spark-menu spark-header__menu" role="menu">
<div class="spark-menu__header">
<button class="spark-menu__toggle" title="Hide Navigation">
<i class="spark-icon--fill spark-icon-close"></i>
</button>
<span class="spark-menu__title"></span>
</div>
<ul class="spark-menu__list spark-header__list spark-header__list--overflow">
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Dashboard</a>
</li>
<li class="spark-menu__list-item active" role="menuitem">
<a href="#" class="spark-menu__list-link">Flight Analysis</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<span class="spark-menu__list-links">
<a href="#" class="spark-menu__list-link">Market Analysis</a>
<button class="spark-menu__list-expand" role="menuitemcheckbox" title="Expand"></button>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Menu Option 1</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<span class="spark-menu__list-links">
<a href="#" class="spark-menu__list-link">Menu Option 2</a>
<button class="spark-menu__list-expand" role="menuitemcheckbox" title="Expand"></button>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 1</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 2</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 3</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 4 That Has A Really Long Title</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Menu Option 3</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link"><i class="spark-icon-announce"></i> Menu Option 4 w/ Icon</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Menu Option 5 w/ A Really Long Title</a>
</li>
<li class="spark-menu__list-item spark-header__list-cta" role="menuitem">
<a href="#" class="spark-header__list-cta-link">View All Analyses</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 8</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 9</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 10</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 11</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 12</a>
</li>
</ul>
<ul class="spark-menu__list">
<li class="spark-menu__list-item spark-menu__list-item--secondary" role="menuitem">
<a href="#" class="spark-menu__list-link spark-menu__ignore">
<i class="spark-icon--fill spark-icon-search spark-icon--md"></i>
<span class="spark-header__collapsed-show">Search</span>
</a>
</li>
</ul>
</div>
<div class="spark-header__sign-in spark-popover">
<a href="#" class="spark-menu__list-link spark-popover__toggle">Sign In</a>
<form class="spark-popover__content--bottom col-xs-8 col-md-4" role="tooltip" onsubmit="return false;" data-anchor-x="right">
<a href="#" class="spark-popover__close" title="Close"></a>
<h4>Account Sign In</h4>
<label class="spark-input spark-mar-t-1">
<input class="spark-input__field" name="username" role="textbox">
<span class="spark-label">Username</span>
</label>
<label class="spark-input">
<input class="spark-input__field" name="password" type="password" role="textbox">
<span class="spark-label">Password</span>
</label>
<button class="spark-btn spark-btn--md spark-btn--block">Sign In</button>
<div class="spark-text-center spark-mar-t-1">
<a href="#example-link" class="spark-link spark-zeta">Forgot username or password?</a>
</div>
<span class="spark-popover__caret"></span>
</form>
</div>
</nav>
</header>
<main id="mainContent">
<div class="container">
<div class="row spark-mar-b-2 spark-mar-t-2">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12">
<h1>Side Fixed Panel with Cover and Underlay</h1>
</div>
<div class="col-xs-12">
<div class="spark-panel spark-mar-t-1">
<div class="spark-panel__content">
<section>
<h2>Panel Heading</h2>
<p>
Lorem ipsum Aliqua occaecat voluptate qui sint occaecat in laboris amet dolor ea aliquip qui in quis ullamco non commodo est sit laborum aliqua ex do incididunt.
</p>
<p>
Duis elit laborum cupidatat do cillum nulla est culpa elit cillum culpa in culpa velit nisi commodo commodo sit Duis magna irure anim enim nisi mollit sit et enim adipisicing aute sed proident consequat proident ullamco consectetur fugiat dolore culpa deserunt veniam eu magna dolor proident tempor aliqua dolor officia enim.
</p>
<nav class="spark-btn-group spark-mar-t-2">
<div class="spark-btn-group-secondary">
<button id="openLeft--cover--underlay" aria-expanded="false" class="spark-btn spark-btn--md spark-btn--secondary" aria-controls="side-fixed-panel--cover--overlay">Open Left</button>
</div>
<button id="openRight--cover--underlay" aria-expanded="false" class="spark-btn spark-btn--md spark-btn-group-primary" aria-controls="side-fixed-panel--cover--overlay">Open Right</button>
</nav>
</section>
<hr />
<section>
<h3>Sub-Section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae perferendis eligendi deserunt optio, voluptatum et amet obcaecati at, earum eos veritatis quaerat ullam ad, quisquam consequuntur velit nihil maxime recusandae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos impedit dolorum rem magnam veniam eligendi, quas deserunt inventore perspiciatis. Veniam non sequi distinctio illum, eum quod vel sunt alias consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ut sed similique deserunt molestias temporibus soluta rem placeat libero et, enim eius repudiandae corporis iusto. Assumenda consectetur nihil, enim libero.</p>
</section>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="spark-panel spark-mar-t-1">
<div class="spark-panel__content">
<section>
<h2>Panel Heading</h2>
<p>
Lorem ipsum Aliqua occaecat voluptate qui sint occaecat in laboris amet dolor ea aliquip qui in quis ullamco non commodo est sit laborum aliqua ex do incididunt.
</p>
<p>
Duis elit laborum cupidatat do cillum nulla est culpa elit cillum culpa in culpa velit nisi commodo commodo sit Duis magna irure anim enim nisi mollit sit et enim adipisicing aute sed proident consequat proident ullamco consectetur fugiat dolore culpa deserunt veniam eu magna dolor proident tempor aliqua dolor officia enim.
</p>
</section>
<hr />
<section>
<h3>Sub-Section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae perferendis eligendi deserunt optio, voluptatum et amet obcaecati at, earum eos veritatis quaerat ullam ad, quisquam consequuntur velit nihil maxime recusandae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos impedit dolorum rem magnam veniam eligendi, quas deserunt inventore perspiciatis. Veniam non sequi distinctio illum, eum quod vel sunt alias consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ut sed similique deserunt molestias temporibus soluta rem placeat libero et, enim eius repudiandae corporis iusto. Assumenda consectetur nihil, enim libero.</p>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<aside class="spark-panel--fixed copy-panel--example" data-position="right" data-placement="cover" id="side-fixed-panel--cover--overlay" tabindex="-1">
<a class="spark-panel--fixed__close" aria-label="Close Panel" tabindex="0"></a>
<section>
<h2>Panel Heading</h2>
<p>
Lorem ipsum Aliqua occaecat voluptate qui sint occaecat in laboris amet dolor ea aliquip qui in quis ullamco non commodo est sit laborum aliqua ex do incididunt.
</p>
<p>
Duis elit laborum cupidatat do cillum nulla est culpa elit cillum culpa in culpa velit nisi commodo commodo sit Duis magna irure anim enim nisi mollit sit et enim adipisicing aute sed proident consequat proident ullamco consectetur fugiat dolore culpa deserunt veniam eu magna dolor proident tempor aliqua dolor officia enim.
</p>
</section>
<hr />
<section>
<h3>Sub-Section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae perferendis eligendi deserunt optio, voluptatum et amet obcaecati at, earum eos veritatis quaerat ullam ad, quisquam consequuntur velit nihil maxime recusandae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos impedit dolorum rem magnam veniam eligendi, quas deserunt inventore perspiciatis. Veniam non sequi distinctio illum, eum quod vel sunt alias consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ut sed similique deserunt molestias temporibus soluta rem placeat libero et, enim eius repudiandae corporis iusto. Assumenda consectetur nihil, enim libero.</p>
</section>
<hr />
<section>
<h3>Sub-Section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae perferendis eligendi deserunt optio, voluptatum et amet obcaecati at, earum eos veritatis quaerat ullam ad, quisquam consequuntur velit nihil maxime recusandae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos impedit dolorum rem magnam veniam eligendi, quas deserunt inventore perspiciatis. Veniam non sequi distinctio illum, eum quod vel sunt alias consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ut sed similique deserunt molestias temporibus soluta rem placeat libero et, enim eius repudiandae corporis iusto. Assumenda consectetur nihil, enim libero.</p>
</section>
<hr />
<section>
<h3>Sub-Section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae perferendis eligendi deserunt optio, voluptatum et amet obcaecati at, earum eos veritatis quaerat ullam ad, quisquam consequuntur velit nihil maxime recusandae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos impedit dolorum rem magnam veniam eligendi, quas deserunt inventore perspiciatis. Veniam non sequi distinctio illum, eum quod vel sunt alias consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ut sed similique deserunt molestias temporibus soluta rem placeat libero et, enim eius repudiandae corporis iusto. Assumenda consectetur nihil, enim libero.</p>
</section>
</aside>
<footer class="spark-footer">
<div class="container">
<a class="spark-footer__logo spark-hidden--lte-sm" title="Sabre"><i class="spark-logo spark-logo--sabre spark-logo--xs"></i></a>
<div class="spark-footer__content">
<div class="spark-footer__copyright">
© 2015-16 Sabre <span class="spark-hidden--lte-md">Curabitur blandit tempus porttitor.</span>
</div>
<ul class="spark-footer__list">
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" href="javascript: void(0);">
Legal Policy
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" href="javascript: void(0);">
Contact Us
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" href="javascript: void(0);">
Support
</a>
</li>
</ul>
</div>
<ul class="spark-footer__list spark-footer__list--right spark-footer__list--icons">
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="Twitter" title="Twitter">
<i class="spark-icon-social-twitter spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="Facebook" title="Facebook">
<i class="spark-icon-social-facebook spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="LinkedIn" title="LinkedIn">
<i class="spark-icon-social-linkedin spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="Instagram" title="Instagram">
<i class="spark-icon-social-instagram spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="YouTube" title="YouTube">
<i class="spark-icon-social-youtube spark-icon--fill"></i>
</a>
</li>
</ul>
</div>
</footer>
<style type="text/css">
.spark-panel__container {
align-content: flex-start;
align-items: stretch;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow: hidden;
position: relative;
}
.spark-panel__container .spark-panel__container__main {
flex: 1;
overflow-y: auto;
padding: 0 1rem;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
.spark-panel__container .spark-panel__container__main::-webkit-scrollbar {
display: none;
width: 0;
}
.spark-panel__container .spark-panel__container__panel.spark-panel--fixed[data-position][data-placement="push"] {
position: absolute;
top: 0;
}
.spark-panel__container .spark-panel__container__panel.spark-panel--fixed[data-position="left"][data-placement="push"] .spark-panel__container__panel__content {
right: 0;
}
.spark-panel__container .spark-panel__container__panel.spark-panel--fixed[data-position="right"][data-placement="push"] .spark-panel__container__panel__content {
left: 0;
}
.spark-panel--fixed[data-placement="cover"],
.spark-panel__container__panel[data-placement="cover"] {
padding: 5rem 1rem 2rem 1rem;
}
.spark-panel--fixed[data-placement="cover"].spark-panel--docked section:not(.spark-table),
.spark-panel__container__panel[data-placement="cover"].spark-panel--docked section:not(.spark-table) {
margin: auto 2rem 1rem;
}
.spark-panel--fixed[data-placement="cover"].spark-panel--docked hr,
.spark-panel__container__panel.spark-panel--docked hr {
margin-left: 2rem;
margin-right: 2rem;
}
.spark-panel--fixed .copy-panel--example:focus {
outline: none;
}
.spark-panel--fixed[data-placement="cover"].copy-panel--example {
padding: 1rem 2rem;
}
.spark-panel--fixed[data-placement="cover"].copy-panel--example h2 {
margin-top: 4rem;
}
.spark-panel--fixed[data-placement="cover"] .copy-panel--example h2,
.spark-panel__container__panel[data-placement="cover"] .copy-panel--example h2,
.spark-panel--fixed[data-placement="push"] .copy-panel--example h2,
.spark-panel__container__panel[data-placement="push"] .copy-panel--example h2 {
margin-top: 5rem;
}
.spark-panel--fixed[data-placement="push"],
.spark-panel__container__panel[data-placement="push"] {
max-height: calc(100vh - 84px - 61px);
}
.spark-panel--fixed[data-placement="push"] form,
.spark-panel__container__panel[data-placement="push"] form {
margin: 1rem 2rem auto 2rem;
}
.spark-panel--fixed[data-placement="push"] section,
.spark-panel__container__panel[data-placement="push"] section {
margin: auto 2rem 1rem;
}
.spark-panel--fixed[data-placement="push"] hr,
.spark-panel__container__panel[data-placement="push"] hr {
margin-left: 2rem;
margin-right: 2rem;
}
.spark-panel--fixed {
width: 365px;
}
@media screen and (max-width: 355px) {
.spark-panel--fixed {
width: 100%;
}
}
</style>var sideFixedPanelEl = document.querySelector('aside.spark-panel--fixed');
var sideFixedPanel = new Spark.SideFixedPanel(sideFixedPanelEl);
sideFixedPanel.on('open', function() {
sideFixedPanel.el.querySelector('.spark-panel--fixed .spark-panel--fixed__close').focus();
});
var openLeftButton = document.getElementById('openLeft--cover--underlay');
var openRightButton = document.getElementById('openRight--cover--underlay');
openLeftButton.addEventListener('click', function(e) {
e.preventDefault();
sideFixedPanel.open({
position: 'left'
});
return false;
});
openRightButton.addEventListener('click', function(e) {
e.preventDefault();
sideFixedPanel.open({
position: 'right'
});
return false;
});
sideFixedPanel.on('close', function() {
var openButton = sideFixedPanel.position === 'right' ? openRightButton : openLeftButton;
openButton.focus();
});See additional guidelines for important details about implementing this type of Side Fixed Panel in your application.
Additional Guidelines for Side Fixed Panels
- When creating a Side Fixed Panel, the primary
<aside>is best placed unested, directly on the<body>. - All Side Fixed Panels should have a unique
id. This is important for accessibility purposes, as well as functionality if you plan to utilize the automatic alternate panel behavior on screens too small to support your design for larger screens. - It will be necessary to add an event listener to your own control in order to call the component’s
open()method from the JavaScript API. The examples shown use Spark buttons, but this is not a prescribed method. You are free to trigger these panels by whatever means works best for your application.- When using your own control, you will also need to write a callback to run after each time the Side Fixed Panel closes. This is for accessibility purposes, as you‘ll need to return focus back to the element that was used to open the Side Fixed Panel, after it has finished closing. You can do this in several ways.
- If using events, you can register your callback to the Side Fixed Panel‘s
"close"event with the component‘son()method, using the syntaxmySideFixedPanelInstance.on("close", myCallback);. - To use promises when controlling the Side Fixed Panel directly through the JavaScript API, you can chain your callback to the call of
close()using thethen()method on the returned Promise, using this syntaxmySideFixedPanelInstance.close().then(myCallback);. - If using callbacks, provide a callback method up front when instantiating the Side Fixed Panel, using this syntax
var mySideFixedPanelInstance = new Spark.SideFixedPanel(el, {onClose: myCallback});.
- If using events, you can register your callback to the Side Fixed Panel‘s
- When using your own control, you will also need to write a callback to run after each time the Side Fixed Panel closes. This is for accessibility purposes, as you‘ll need to return focus back to the element that was used to open the Side Fixed Panel, after it has finished closing. You can do this in several ways.
- The following table lists all the events emitted by Side Fixed Panels. The “Can be Triggered” column indicates whether an event can be triggered programmatically using the Side Fixed Panel‘s
trigger()method.Event Can Be Triggered Description open No Fired once a Side Fixed Panel has finished animating open. close No Fired once a Side Fixed Panel has finished animating closed. dismiss Yes Fired manually by developer, or by Spark anytime a related Spark entity wants to signal the user is done using the panel (such as when a coupled Underlay is tapped, or the panel close button is clicked).
Causes the Side Fixed Panel to close if open. No effect on a Side Fixed Panel that is already closed.toggle No Fired whenever the toggle()method is used. Useful if you‘d like to validate an open or close state, or run logic only if open or closed. - When opening a Side Fixed Panel, you may control whether or not to show an Underlay by passing a params object to
open(). If you don‘t specify an option, then an Underlay will render by default. To prevent an Underlay when opening a Side Fixed Panel, specifyFALSEusing the syntaxmySideFixedPanelInstance.open({underlay: false});. See the sample code for an example. - When opening a Side Fixed Panel, it‘s possible to dynamically change the side of the screen it slides out from, at the time of calling
open(). Supported values include"right"or"left". You can check the current position of a Side Fixed Panel at any time by accessing thepositionproperty using the syntaxmySideFixedPanelInstance.position. To change the position dynamically on open, pass a params object toopen()that includes the new value using the syntaxmySideFixedPanelInstance.open({position: "right"});. See the sample code for an example.
Accessibility Notes
The Spark Panel component has been developed with accessibility in mind, but it is important to customize certain aspects to better suit the product you are building. This will revolve around adding aria attributes to certain elements within the component.
Standard panel
For the standard panel, the aria-hidden attribute is added to the spark-expand__content container and initially set to true to indicate that the hidden content is not accessible to screen-readers and assistive devices. The corresponding toggle buttons have aria-expanded and aria-hidden attributes set to indicate whether the panel is expanded and whether the button is hidden respectively. To indicate that the container is controlled by the toggle buttons, the aria-controls attribute is added to each of the buttons. The value of this attribute is then set as the id of the container.
When a user interacts with the panel and either collapses or expands it, the attributes above will be adjusted using Javascript to the appropriate values indicating the current state of the panel.
If you have multiple panels on a single page, it is important to use unique ids to make sure the controls and content are properly associated. It is also important to provide the proper button text in this scenario so that users navigating using assistive devices understand which sections are being expanded or collapsed. For example, if there are two panels on a page, each toggle button should have an aria-label to provide more descriptive text of the section being expanded or collapsed as illustrated in the example below.
<button class="spark-btn spark-btn--text spark-expand__toggle spark-expand__hide--expanded" aria-expanded="false" aria-hidden="false" aria-controls="panel__content" aria-label="View more of this book summary">View More<span class="spark-expand__toggle-caret"></span></button>
<button class="spark-btn spark-btn--text spark-expand__toggle spark-expand__show--expanded" aria-expanded="true" aria-hidden="true" aria-controls="panel__content" aria-label="View less of this book summary">View Less<span class="spark-expand__toggle-caret"></span></button>Image panel
Ensure that an alt attribute is set on the image element. If the image is purely decorative or equivalent text is in the content of the panel itself, then an empty alt attribute may be used.
Fixed panel
The contents of the Fixed Panel will require appropriate Accessibility enhancements depending on the components used in it. Refer to the Accessibility tab of the component’s documentation for relevant guidelines.
Side Fixed Panel
When using a Side Fixed Panel, it’ll be important to give your Side Fixed Panel an id, and to include the proper ARIA attributes necessary to associate your control with the panel.
aria-controls- setting this to theidon your Side Fixed Panel will let the browser know that this element triggers your panel.aria-expanded- the element you use to trigger the panel will also need this attribute to track which state the panel is currently in. Set tofalseinitially, ortrueif your Side Fixed Panel first renders as open. As you open and close your Panel, this attribute will automatically be updated for you.
<button id="openPanel" aria-controls="side-fixed-panel" aria-expanded="false">Open</button>
...
<aside id="side-fixed-panel" class="spark-panel--fixed" data-placement="cover" data-position="right" tabindex="-1">...</aside>On the Side Fixed Panel itself, the following attributes should be provided for accessibility purposes.
tabindex="-1"- this tells the browser that the Side Fixed Panel itself should be skipped over, when assigning the next active element for focus on tab, and instead directs the browsers focus to the Panel’s contents.
<aside id="side-fixed-panel" class="spark-panel--fixed" data-placement="cover" data-position="right" aria-expanded="false" tabindex="-1">...</aside>You’ll also need to provide a callback for the Side Fixed Panel’s “close” event, that returns focus back to your trigger element. This can be done using the component’s .on() method.
<button id="openPanel" aria-controls="side-fixed-panel" aria-expanded="false">Open</button>
...
<aside id="side-fixed-panel" class="spark-panel--fixed" data-placement="cover" data-position="right" tabindex="-1">...</aside>var sideFixedPanelEl = document.querySelector('.spark-panel--fixed');
var sideFixedPanel = new Spark.SideFixedPanel(sideFixedPanelEl);
sideFixedPanel.on('close', function(e) {
var buttonEl = document.getElementById('openPanel');
buttonEl.focus();
});
// or
var sideFixedPanelEl = document.querySelector('.spark-panel--fixed');
var sideFixedPanel = new Spark.SideFixedPanel(sideFixedPanelEl, {
onClose: function() {
var buttonEl = document.getElementById('openPanel');
buttonEl.focus();
}
});When tabbing with a Side Fixed Panel, focus should be allowed to enter and then leave the Panel as long as there is no Underlay present. If an Underlay is present, tabbing should be restricted to contents of the Side Fixed Panel only.