Transaction Summary Bar
The Transaction Summary Bar displays a summary of key information about a transaction, such as a hotel or flight reservation.
Locked Transaction Summary Bar
The locked Transaction Summary Bar utilizes the Fixed Panel component to remain locked at the top of the screen, and provides access to key details that the user is likely to want to see. It gives the user confidence that the correct selections have been made throughout the transaction.
When to Use
- When the user is likely to want persistent access to key details related to the transaction.
Examples
- Transaction Summary Bar (shown above)
- Inline Transaction Summary Bar
- Expand/Collapse Transaction Summary Bar
Usage
Responsive Behavior
On smaller screen sizes, we recommend either stacking content or providing horizontal scrolling depending on how much content is available as part of the Transaction Summary Bar.
Locked Behavior
The Transaction Summary can be utilized within a Fixed Panel to allow docking to the top of the viewport. Refer to the Fixed Panel component documentation for details on setup and configurations.
Inline Editing
If the user is able to make edits to the transaction within the Transaction Summary Bar, use the pencil icon to enable inline editing. If the user needs to make edits in a modal window or return to a previous page in the transaction, use a button or link instead. Inline editing functionality requires custom Javascript to allow toggling of form fields.
Condensed Behavior
Each example of the Transaction Summary Bar allows for condensing behavior where text sizes are reduced through the use of a CSS class. An example of this is documented in the Developer Tab.
Examples
Inline Transaction Summary Bar
This example does not lock to the top of the screen and is recommended when it is less critical for users to have persistent access to the transaction details or when screen real estate is limited and it is likely that users would prefer allocating more space to the primary content on the page.
Expand/Collapse Transaction Summary BarCode Pending
Expand/Collapse functionality can be utilized to expand the height of the Transaction Summary Bar to reveal additional details. If visual separation between the bar and the details is warranted, use the standard example with the panel expand/collapse treatment.
(Select image to view full size)
Developer Notes
Layout and Behaviors
The Transaction Summary Bar component as provided is a simple component that provides CSS for styling text only. The component itself uses a combination of existing styling/classes (including the Spark Grid and Spark Helper classes) and native CSS features such as Flexbox to achieve desired layouts at various screen sizes. This is because the contents of the Transaction Summary Bar will vary across different products, and as such layouts would need to be tailored for each. However, the examples below illustrate how this can be achieved using features available in Spark. For additional features such as toggling of hidden content, custom Javascript is required, and once again this will depend on product needs.
Locked Transaction Summary Bar
The locked example of the Transaction Summary Bar utilizes the Fixed Panel component in order to achieve the docking behavior of the Fixed Panel. The Transaction Summary Bar itself is created by adding the class spark-summary-bar to the containing element.
<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="spark-summary-bar">
<!-- CSS classes prefaced with "example" are for illustrative purposes only and are not included within Spark. -->
<!-- Refer to the example CSS to see how these classes are being used -->
<div class="example--pod-1">
<span class="spark-summary-bar__title">Trip Summary</span>
</div>
<div class="example--pod-2">
<div class="example--inner-pod-wrapper">
<div class="example--inner-pod">
<span class="spark-summary-bar__title">Flights</span>
<span class="spark-summary-bar__subtitle">DFW to ORD, Non-Stop</span>
</div>
<div class="example--inner-pod">
<span class="spark-summary-bar__title">Cruise</span>
<span class="spark-summary-bar__subtitle">Bahamas, Half Moon Cay</span>
</div>
<div class="example--inner-pod">
<span class="spark-summary-bar__title">Car Rental</span>
<span class="spark-summary-bar__subtitle">Economy, 3 Days</span>
</div>
<div class="example--inner-pod">
<span class="spark-summary-bar__title">Amenities</span>
<span class="spark-summary-bar__subtitle">Spa Access</span>
</div>
</div>
</div>
<div class="example--pod-3">
<span class="spark-summary-bar__price">
$<span class="spark-summary-bar__amount">1223.00</span>
</span>
</div>
<div class="example--pod-4">
<button class="spark-summary-bar__toggle" aria-label="Expand"></button>
</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>
</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">
/*
* Custom code for Transaction Summary Bar examples
*/
.spark-summary-bar {
align-items: center;
display: flex;
flex-wrap: wrap;
position: relative;
}
/* Summary Bar inside a Spark Panel */
.example--panel-with-summary-bar {
overflow: hidden;
}
.example--panel-with-summary-bar > .spark-summary-bar {
/* Need to remove the outer box-shadow as that is already present on the spark-panel */
-webkit-box-shadow: none;
box-shadow: none;
}
/* Grouped Summary Bar */
.example--pod-1 {
flex-basis: 100%;
flex-grow: 1;
order: 1;
padding: 1rem;
}
@media (max-width: 795px) {
.example--pod-1 {
padding: 1.5rem 2rem 0;
}
}
.example--pod-2 {
flex-basis: 100%;
flex-grow: 1;
order: 4;
}
.example--pod-2.collapsed {
display: none;
}
.example--pod-3 {
flex-basis: 100%;
flex-grow: 1;
order: 2;
padding: 2rem;
}
.spark-summary-bar--condensed .example--pod-3 {
padding-bottom: 1rem;
padding-top: 1rem;
}
@media (max-width: 795px) {
.example--pod-3,
.spark-summary-bar--condensed .example--pod-3 {
padding-bottom: 1.5rem;
padding-top: 0;
}
.spark-summary-bar--condensed .example--action-item {
padding-top: 1rem;
}
}
@media (min-width: 1048px) {
.example--pod-3 {
padding-left: 3rem;
padding-right: 3rem;
}
}
.example--pod-4 {
order: 3;
position: absolute;
right: 2rem;
top: 3rem;
}
.example-summary-bar-action-item .example--pod-4 {
top: 3.5rem;
}
.example--inner-pod {
padding: 2rem;
}
.spark-summary-bar--condensed .example--inner-pod {
padding-bottom: 1rem;
padding-top: 1rem;
}
@media (max-width: 795px) {
.example--inner-pod,
.spark-summary-bar--condensed .example--inner-pod {
padding-bottom: 1.5rem;
padding-top: 1.5rem;
}
}
@media (min-width: 1048px) {
.example--inner-pod {
padding-left: 3rem;
padding-right: 3rem;
}
}
.spark-summary-bar__title,
.spark-summary-bar__subtitle {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.example-expand-button {
display: block;
}
.spark-icon-airplane,
.spark-icon-arrow-basic-right {
color: #121315;
}
.spark-icon-arrow-basic-right {
margin: 0 1rem;
}
@media (max-width: 543px) {
.spark-icon-arrow-basic-right {
font-size: 1.08333333rem;
margin: 0 0.5rem;
}
}
@media (min-width:544px) {
.example--inner-pod-wrapper {
display: flex;
flex-wrap: wrap;
}
.example--inner-pod {
flex-basis: auto;
flex-grow: 1;
width: 25%;
}
}
@media (max-width: 795px) {
.example--inner-pod-wrapper {
background: #F6F6F7;
border-top: 1px solid #E1E2E5;
}
}
@media (min-width:796px) {
.spark-summary-bar {
flex-wrap: nowrap;
}
.example--pod-1,
.example--pod-4 {
display: none;
}
.example--pod-1 {
flex-basis: auto;
order: 1;
}
.example--pod-2 {
flex-basis: auto;
order: 2;
}
.example--pod-3 {
flex-basis: auto;
order: 3;
text-align: right
}
.example--pod-4 {
order: 4;
}
.example--inner-pod-wrapper {
box-shadow: none;
}
}
/* Single Flight Summary Bar */
.example--flight-summary-bar {
padding: 1rem 2rem;
}
@media (min-width: 796px) {
.example--flight-summary-bar {
padding: 2rem;
}
}
/* Summary Bar inside a Fixed Panel */
/* Remove the box-shadow on the Summary bar if it is the only thing inside a Fixed Panel and is edge to edge */
.spark-panel--fixed .spark-summary-bar {
-webkit-box-shadow: none;
box-shadow: none;
}
</style>// Vanilla JS
var el = document.querySelector('.spark-panel--fixed');
var fixedPanel = new Spark.FixedPanel(el);
// Custom JS for Transaction Summary Bar Examples
function toggleDisplay(el, btn) {
if (el.classList.contains('collapsed')) {
el.classList.remove('collapsed');
btn.classList.remove('collapsed');
} else {
el.classList.add('collapsed');
btn.classList.add('collapsed');
}
}
function onScreenResize(el) {
if ((window.innerWidth >= 796) && el.classList.contains('collapsed')) {
el.classList.remove('collapsed');
}
}
var summaryBars = document.querySelectorAll('.spark-summary-bar');
var btn = [];
var pod = [];
for (var i = 0, len = summaryBars.length; i < len; i++) {
btn[i] = summaryBars[i].querySelector('.spark-summary-bar__toggle');
pod[i] = summaryBars[i].querySelector('.example--pod-2');
btn[i].addEventListener('click', toggleDisplay.bind(null, pod[i], btn[i]));
window.addEventListener('resize', onScreenResize.bind(null, pod[i]));
}Inline Transaction Summary Bar
The inline example of the Transaction Summary Bar uses a simple Panel as the containing element of the Transaction Summary Bar , and similar to the locked example above, the Transaction Summary Bar itself is created by adding the class spark-summary-bar.
<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>
<div class="col-xs-12 spark-mar-b-2">
<div class="spark-panel example--panel-with-summary-bar">
<div class="spark-summary-bar">
<!-- CSS classes prefaced with "example" are for illustrative purposes only and are not included within Spark. -->
<!-- Refer to the example CSS to see how these classes are being used -->
<div class="example--pod-1">
<span class="spark-summary-bar__title">Trip Summary</span>
</div>
<div class="example--pod-2">
<div class="example--inner-pod-wrapper">
<div class="example--inner-pod">
<span class="spark-summary-bar__title">Flights</span>
<span class="spark-summary-bar__subtitle">DFW to ORD, Non-Stop</span>
</div>
<div class="example--inner-pod">
<span class="spark-summary-bar__title">Cruise</span>
<span class="spark-summary-bar__subtitle">Bahamas, Half Moon Cay</span>
</div>
<div class="example--inner-pod">
<span class="spark-summary-bar__title">Car Rental</span>
<span class="spark-summary-bar__subtitle">Economy, 3 Days</span>
</div>
<div class="example--inner-pod">
<span class="spark-summary-bar__title">Amenities</span>
<span class="spark-summary-bar__subtitle">Spa Access</span>
</div>
</div>
</div>
<div class="example--pod-3">
<span class="spark-summary-bar__price">
$<span class="spark-summary-bar__amount">1223.00</span>
</span>
</div>
<div class="example--pod-4">
<button class="spark-summary-bar__toggle" aria-label="Expand"></button>
</div>
</div>
</div>
</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>
</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">
/*
* Custom code for Transaction Summary Bar examples
*/
.spark-summary-bar {
align-items: center;
display: flex;
flex-wrap: wrap;
position: relative;
}
/* Summary Bar inside a Spark Panel */
.example--panel-with-summary-bar {
overflow: hidden;
}
.example--panel-with-summary-bar > .spark-summary-bar {
/* Need to remove the outer box-shadow as that is already present on the spark-panel */
-webkit-box-shadow: none;
box-shadow: none;
}
/* Grouped Summary Bar */
.example--pod-1 {
flex-basis: 100%;
flex-grow: 1;
order: 1;
padding: 1rem;
}
@media (max-width: 795px) {
.example--pod-1 {
padding: 1.5rem 2rem 0;
}
}
.example--pod-2 {
flex-basis: 100%;
flex-grow: 1;
order: 4;
}
.example--pod-2.collapsed {
display: none;
}
.example--pod-3 {
flex-basis: 100%;
flex-grow: 1;
order: 2;
padding: 2rem;
}
.spark-summary-bar--condensed .example--pod-3 {
padding-bottom: 1rem;
padding-top: 1rem;
}
@media (max-width: 795px) {
.example--pod-3,
.spark-summary-bar--condensed .example--pod-3 {
padding-bottom: 1.5rem;
padding-top: 0;
}
.spark-summary-bar--condensed .example--action-item {
padding-top: 1rem;
}
}
@media (min-width: 1048px) {
.example--pod-3 {
padding-left: 3rem;
padding-right: 3rem;
}
}
.example--pod-4 {
order: 3;
position: absolute;
right: 2rem;
top: 3rem;
}
.example-summary-bar-action-item .example--pod-4 {
top: 3.5rem;
}
.example--inner-pod {
padding: 2rem;
}
.spark-summary-bar--condensed .example--inner-pod {
padding-bottom: 1rem;
padding-top: 1rem;
}
@media (max-width: 795px) {
.example--inner-pod,
.spark-summary-bar--condensed .example--inner-pod {
padding-bottom: 1.5rem;
padding-top: 1.5rem;
}
}
@media (min-width: 1048px) {
.example--inner-pod {
padding-left: 3rem;
padding-right: 3rem;
}
}
.spark-summary-bar__title,
.spark-summary-bar__subtitle {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.example-expand-button {
display: block;
}
.spark-icon-airplane,
.spark-icon-arrow-basic-right {
color: #121315;
}
.spark-icon-arrow-basic-right {
margin: 0 1rem;
}
@media (max-width: 543px) {
.spark-icon-arrow-basic-right {
font-size: 1.08333333rem;
margin: 0 0.5rem;
}
}
@media (min-width:544px) {
.example--inner-pod-wrapper {
display: flex;
flex-wrap: wrap;
}
.example--inner-pod {
flex-basis: auto;
flex-grow: 1;
width: 25%;
}
}
@media (max-width: 795px) {
.example--inner-pod-wrapper {
background: #F6F6F7;
border-top: 1px solid #E1E2E5;
}
}
@media (min-width:796px) {
.spark-summary-bar {
flex-wrap: nowrap;
}
.example--pod-1,
.example--pod-4 {
display: none;
}
.example--pod-1 {
flex-basis: auto;
order: 1;
}
.example--pod-2 {
flex-basis: auto;
order: 2;
}
.example--pod-3 {
flex-basis: auto;
order: 3;
text-align: right
}
.example--pod-4 {
order: 4;
}
.example--inner-pod-wrapper {
box-shadow: none;
}
}
/* Single Flight Summary Bar */
.example--flight-summary-bar {
padding: 1rem 2rem;
}
@media (min-width: 796px) {
.example--flight-summary-bar {
padding: 2rem;
}
}
/* Summary Bar inside a Fixed Panel */
/* Remove the box-shadow on the Summary bar if it is the only thing inside a Fixed Panel and is edge to edge */
.spark-panel--fixed .spark-summary-bar {
-webkit-box-shadow: none;
box-shadow: none;
}
</style>// Vanilla JS
var el = document.querySelector('.spark-panel--fixed');
var fixedPanel = new Spark.FixedPanel(el);
// Custom JS for Transaction Summary Bar Examples
function toggleDisplay(el, btn) {
if (el.classList.contains('collapsed')) {
el.classList.remove('collapsed');
btn.classList.remove('collapsed');
} else {
el.classList.add('collapsed');
btn.classList.add('collapsed');
}
}
function onScreenResize(el) {
if ((window.innerWidth >= 796) && el.classList.contains('collapsed')) {
el.classList.remove('collapsed');
}
}
var summaryBars = document.querySelectorAll('.spark-summary-bar');
var btn = [];
var pod = [];
for (var i = 0, len = summaryBars.length; i < len; i++) {
btn[i] = summaryBars[i].querySelector('.spark-summary-bar__toggle');
pod[i] = summaryBars[i].querySelector('.example--pod-2');
btn[i].addEventListener('click', toggleDisplay.bind(null, pod[i], btn[i]));
window.addEventListener('resize', onScreenResize.bind(null, pod[i]));
}Condensed Transaction Summary Bar
A condensed Transaction Summary Bar can be created by adding the spark-summary-bar--condensed class to the spark-summary-bar element.
<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="spark-summary-bar spark-summary-bar--condensed">
<!-- CSS classes prefaced with "example" are for illustrative purposes only and are not included within Spark. -->
<!-- Refer to the example CSS to see how these classes are being used -->
<div class="example--pod-1">
<span class="spark-summary-bar__title">Trip Summary</span>
</div>
<div class="example--pod-2">
<div class="example--inner-pod-wrapper">
<div class="example--inner-pod">
<span class="spark-summary-bar__title">Flights</span>
<span class="spark-summary-bar__subtitle">DFW to ORD, Non-Stop</span>
</div>
<div class="example--inner-pod">
<span class="spark-summary-bar__title">Cruise</span>
<span class="spark-summary-bar__subtitle">Bahamas, Half Moon Cay</span>
</div>
<div class="example--inner-pod">
<span class="spark-summary-bar__title">Car Rental</span>
<span class="spark-summary-bar__subtitle">Economy, 3 Days</span>
</div>
<div class="example--inner-pod">
<span class="spark-summary-bar__title">Amenities</span>
<span class="spark-summary-bar__subtitle">Spa Access</span>
</div>
</div>
</div>
<div class="example--pod-3">
<span class="spark-summary-bar__price">
$<span class="spark-summary-bar__amount">1223.00</span>
</span>
</div>
<div class="example--pod-4">
<button class="spark-summary-bar__toggle" aria-label="Expand"></button>
</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>
</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">
/*
* Custom code for Transaction Summary Bar examples
*/
.spark-summary-bar {
align-items: center;
display: flex;
flex-wrap: wrap;
position: relative;
}
/* Summary Bar inside a Spark Panel */
.example--panel-with-summary-bar {
overflow: hidden;
}
.example--panel-with-summary-bar > .spark-summary-bar {
/* Need to remove the outer box-shadow as that is already present on the spark-panel */
-webkit-box-shadow: none;
box-shadow: none;
}
/* Grouped Summary Bar */
.example--pod-1 {
flex-basis: 100%;
flex-grow: 1;
order: 1;
padding: 1rem;
}
@media (max-width: 795px) {
.example--pod-1 {
padding: 1.5rem 2rem 0;
}
}
.example--pod-2 {
flex-basis: 100%;
flex-grow: 1;
order: 4;
}
.example--pod-2.collapsed {
display: none;
}
.example--pod-3 {
flex-basis: 100%;
flex-grow: 1;
order: 2;
padding: 2rem;
}
.spark-summary-bar--condensed .example--pod-3 {
padding-bottom: 1rem;
padding-top: 1rem;
}
@media (max-width: 795px) {
.example--pod-3,
.spark-summary-bar--condensed .example--pod-3 {
padding-bottom: 1.5rem;
padding-top: 0;
}
.spark-summary-bar--condensed .example--action-item {
padding-top: 1rem;
}
}
@media (min-width: 1048px) {
.example--pod-3 {
padding-left: 3rem;
padding-right: 3rem;
}
}
.example--pod-4 {
order: 3;
position: absolute;
right: 2rem;
top: 3rem;
}
.example-summary-bar-action-item .example--pod-4 {
top: 3.5rem;
}
.example--inner-pod {
padding: 2rem;
}
.spark-summary-bar--condensed .example--inner-pod {
padding-bottom: 1rem;
padding-top: 1rem;
}
@media (max-width: 795px) {
.example--inner-pod,
.spark-summary-bar--condensed .example--inner-pod {
padding-bottom: 1.5rem;
padding-top: 1.5rem;
}
}
@media (min-width: 1048px) {
.example--inner-pod {
padding-left: 3rem;
padding-right: 3rem;
}
}
.spark-summary-bar__title,
.spark-summary-bar__subtitle {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.example-expand-button {
display: block;
}
.spark-icon-airplane,
.spark-icon-arrow-basic-right {
color: #121315;
}
.spark-icon-arrow-basic-right {
margin: 0 1rem;
}
@media (max-width: 543px) {
.spark-icon-arrow-basic-right {
font-size: 1.08333333rem;
margin: 0 0.5rem;
}
}
@media (min-width:544px) {
.example--inner-pod-wrapper {
display: flex;
flex-wrap: wrap;
}
.example--inner-pod {
flex-basis: auto;
flex-grow: 1;
width: 25%;
}
}
@media (max-width: 795px) {
.example--inner-pod-wrapper {
background: #F6F6F7;
border-top: 1px solid #E1E2E5;
}
}
@media (min-width:796px) {
.spark-summary-bar {
flex-wrap: nowrap;
}
.example--pod-1,
.example--pod-4 {
display: none;
}
.example--pod-1 {
flex-basis: auto;
order: 1;
}
.example--pod-2 {
flex-basis: auto;
order: 2;
}
.example--pod-3 {
flex-basis: auto;
order: 3;
text-align: right
}
.example--pod-4 {
order: 4;
}
.example--inner-pod-wrapper {
box-shadow: none;
}
}
/* Single Flight Summary Bar */
.example--flight-summary-bar {
padding: 1rem 2rem;
}
@media (min-width: 796px) {
.example--flight-summary-bar {
padding: 2rem;
}
}
/* Summary Bar inside a Fixed Panel */
/* Remove the box-shadow on the Summary bar if it is the only thing inside a Fixed Panel and is edge to edge */
.spark-panel--fixed .spark-summary-bar {
-webkit-box-shadow: none;
box-shadow: none;
}
</style>// Vanilla JS
var el = document.querySelector('.spark-panel--fixed');
var fixedPanel = new Spark.FixedPanel(el);
// Custom JS for Transaction Summary Bar Examples
function toggleDisplay(el, btn) {
if (el.classList.contains('collapsed')) {
el.classList.remove('collapsed');
btn.classList.remove('collapsed');
} else {
el.classList.add('collapsed');
btn.classList.add('collapsed');
}
}
function onScreenResize(el) {
if ((window.innerWidth >= 796) && el.classList.contains('collapsed')) {
el.classList.remove('collapsed');
}
}
var summaryBars = document.querySelectorAll('.spark-summary-bar');
var btn = [];
var pod = [];
for (var i = 0, len = summaryBars.length; i < len; i++) {
btn[i] = summaryBars[i].querySelector('.spark-summary-bar__toggle');
pod[i] = summaryBars[i].querySelector('.example--pod-2');
btn[i].addEventListener('click', toggleDisplay.bind(null, pod[i], btn[i]));
window.addEventListener('resize', onScreenResize.bind(null, pod[i]));
}If a Transaction Summary Bar is used within a Fixed Panel, the Panel’s condenseOnScroll configuration can also be utilized to provide a class that manages styling. Refer to the Fixed Panel component documentation for more details.
Accessibility Notes
For any component used within the Transaction Summary Bar, refer to that component’s Accessibility documentation for details on how to make it fully accessible to screen-readers and other assistive technologies.