Table with Toolbar
This layout provides a starting point for a Table with a Toolbar
Additional Guidelines
This template is made up the of the following components:
<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 Page with Side Menu</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="spark-mar-b-2 spark-mar-t-2">
<div class="col-xs-12">
<h1>Sample Table with Toolbar</h1>
</div>
<div class="spark-panel spark-mar-t-1">
<div class="spark-panel__content">
<section class="spark-table">
<div class="row">
<header class="spark-table__header">
<div class="col-xs-10 col-md-6">
<h4 class="spark-table__title">
Default Table
</h4>
</div>
<div class="col-xs-2 col-md-6">
<div class="spark-toolbar spark-toolbar--icon" tabindex="0" role="menubar">
<div class="spark-toolbar__container--visible">
<div class="spark-toolbar__item" aria-label="Print" label="Print" role="menuitem" tabindex="-1">
<div class="spark-icon-print spark-toolbar__item-helper"></div>
</div>
<div class="spark-toolbar__item" aria-label="Settings" label="Settings" role="menuitem" tabindex="-1">
<div class="spark-toolbar__item--content">
<ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
<li tabindex="0">Save Results</li>
<li tabindex="0">Export to Excel</li>
<li tabindex="0">Create an Alert</li>
</ul>
<ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
<li tabindex="0">Modify Search</li>
<li tabindex="0">Advanced Search</li>
</ul>
</div>
<div class="spark-icon-cog spark-toolbar__item-helper"></div>
</div>
<div class="spark-toolbar__item" aria-label="Filter" label="Filter" role="menuitem" tabindex="-1">
<div class="spark-icon-sliders spark-toolbar__item-helper"></div>
</div>
<div class="spark-toolbar__item" aria-label="Delete" label="Delete" role="menuitem" tabindex="-1">
<div class="spark-icon-trash spark-toolbar__item-helper"></div>
</div>
</div>
<div class="spark-toolbar__show-more" aria-label="show more" tabindex="-1">
<i class="spark-icon-menu-ellipsis-vertical"></i>
</div>
<!-- All items should be placed in .spark-toolbar__container-shown -->
<div class="spark-toolbar__container--hidden">
</div>
</div>
</div>
</header>
</div>
<div class="spark-table__scroll">
<table role="grid">
<thead>
<tr>
<td class="spark-table__checkbox spark-table__select-all">
<label class="spark-checkbox spark-mar-b-0">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">Select all flights</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">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane spark-icon--lg" aria-label="flight" title="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--sm">Book Flight <span class="spark-assistive-text">DL0431</span></button>
</td>
</tr>
<tr>
<td class="spark-table__checkbox">
<label class="spark-checkbox spark-mar-b-0">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
<span class="spark-assistive-text">select row</span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane spark-icon--lg" aria-label="flight" title="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--sm">Book Flight <span class="spark-assistive-text">AA1321</span></button>
</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</div>
</div>
</div>
</main>
<footer class="spark-footer">
<div class="container">
<a class="spark-footer__logo spark-hidden--lte-sm" title="Sabre"><i class="spark-logo spark-logo--sabre spark-logo--xs"></i></a>
<div class="spark-footer__content">
<div class="spark-footer__copyright">
© 2015-16 Sabre <span class="spark-hidden--lte-md">Curabitur blandit tempus porttitor.</span>
</div>
<ul class="spark-footer__list">
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" href="javascript: void(0);">
Legal Policy
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" href="javascript: void(0);">
Contact Us
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" href="javascript: void(0);">
Support
</a>
</li>
</ul>
</div>
<ul class="spark-footer__list spark-footer__list--right spark-footer__list--icons">
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="Twitter" title="Twitter">
<i class="spark-icon-social-twitter spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="Facebook" title="Facebook">
<i class="spark-icon-social-facebook spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="LinkedIn" title="LinkedIn">
<i class="spark-icon-social-linkedin spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="Instagram" title="Instagram">
<i class="spark-icon-social-instagram spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="YouTube" title="YouTube">
<i class="spark-icon-social-youtube spark-icon--fill"></i>
</a>
</li>
</ul>
</div>
</footer>
</div>
<style type="text/css">
.white-bg {
background-color: #ffffff;
}
</style>
<style type="text/css">
</style>