Tabbed Container with Side Menu Layout
This layout provides a starting point for screens displaying a basic panel container with a side panel menu.
Additional Guidelines
The main content area may include a variety of content containers, including:
For guidelines on the menu, see Panel Menus.
<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="row spark-mar-b-2 spark-mar-t-2">
<div class="col-xs-12 col-lg-3 spark-hidden--lte-md">
<nav class="spark-menu spark-menu--panel col-xs-12" role="menu">
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a 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 class="spark-menu__list-link">First Level B</a>
<a 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 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 class="spark-menu__list-link spark-menu__list-expand">Second Level b</a>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a class="spark-menu__list-link">Third-level Item I</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a class="spark-menu__list-link">Third-level Item II</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a class="spark-menu__list-link">Third-level Item III</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a class="spark-menu__list-link">Third-level Item IV</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a class="spark-menu__list-link">Second Level c</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a class="spark-menu__list-link">Second Level d</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item active" role="menuitem">
<a class="spark-menu__list-link">Sample Tab Panel Page with Side Menu</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a 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 class="spark-menu__list-link">Second Level aa</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a class="spark-menu__list-link">Second Level bb</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a class="spark-menu__list-link">Second Level cc</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="col-xs-12 col-lg-9">
<div class="row">
<div class="col-xs-12">
<h1>Sample Tab Panel Page with Side Menu</h1>
</div>
<div class="col-xs-12">
<div class="spark-tabs">
<nav class="spark-tabs__nav" role="menubar">
<div class="spark-tabs__scroll">
<ul class="spark-tabs__list" role="tablist">
<li class="spark-tabs__tab active" role="tab"><a href="#">Flight Reservations</a></li>
<li class="spark-tabs__tab" role="tab"><a href="#">Flight Reservations Condensed</a></li>
<li class="spark-tabs__tab" role="tab"><i aria-hidden="true" class="spark-icon-pictures"></i><a href="#">Animal Pictures</a></li>
</ul>
</div>
<div class="spark-tabs__btns">
<button aria-label="Scroll Tabs to the beginning" class="spark-tabs__btn spark-icon-arrow-chevron-left spark-tabs__btn--left"></button>
<button aria-label="Scroll Tabs to the end" class="spark-tabs__btn spark-icon-arrow-chevron-right spark-tabs__btn--right"></button>
</div>
</nav>
<div class="spark-tabs__panels white-bg">
<div role="tabpanel" class="spark-tabs__panel">
<div class="row">
<div class="col-xs-12">
<section class="spark-table">
<header class="spark-table__header">
<h3 class="spark-table__title">
Flight Reservations
</h3>
</header>
<div class="spark-table__scroll">
<table role="grid">
<thead>
<tr>
<th class="spark-table__select-all">
<label class="spark-checkbox">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
</label>
</th>
<th class="spark-text-center">
Icon
</th>
<th data-sort="asc">
Flight No.
</th>
<th data-sort>
Departure <span class="spark-hidden--lte-md">Time</span>
</th>
<th data-sort>
Arrival <span class="spark-hidden--lte-md">Time</span>
</th>
<th class="spark-text-center">
Actions
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label class="spark-checkbox">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane spark-icon--md" 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--sm spark-btn--secondary">Book Flight</button>
</td>
</tr>
<tr>
<td>
<label class="spark-checkbox">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane spark-icon--md" 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--sm spark-btn--secondary">Book Flight</button>
</td>
</tr>
<tr>
<td>
<label class="spark-checkbox">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane spark-icon--md" 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--sm spark-btn--secondary">Book Flight</button>
</td>
</tr>
<tr>
<td>
<label class="spark-checkbox">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane spark-icon--md" 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--sm spark-btn--secondary">Book Flight</button>
</td>
</tr>
<tr>
<td>
<label class="spark-checkbox">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane spark-icon--md" 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--sm spark-btn--secondary">Book Flight</button>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<nav class="spark-btn-group spark-mar-t-2 spark-mar-b-1">
<div class="spark-btn-group-secondary">
<button class="spark-btn spark-btn--md spark-btn--secondary spark-modal__dismiss">Tertiary</button>
<button class="spark-btn spark-btn--md spark-btn--secondary" onclick="return false;">Secondary</button>
</div>
<button class="spark-btn spark-btn--md spark-btn-group-primary" onclick="return false;">Primary</button>
</nav>
</div>
</div>
</div>
<div role="tabpanel" class="spark-tabs__panel">
<div class="row">
<div class="col-xs-12">
<section class="spark-table spark-table--condensed">
<header class="spark-table__header">
<h3 class="spark-table__title">
Flight Reservations Condensed
</h3>
</header>
<div class="spark-table__scroll">
<table role="grid">
<thead>
<tr>
<th class="spark-table__select-all">
<label class="spark-checkbox">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
</label>
</th>
<th class="spark-text-center">
Icon
</th>
<th data-sort="asc">
Flight No.
</th>
<th data-sort>
Departure <span class="spark-hidden--lte-md">Time</span>
</th>
<th data-sort>
Arrival <span class="spark-hidden--lte-md">Time</span>
</th>
<th class="spark-text-center">
Actions
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label class="spark-checkbox">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane spark-icon" 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 spark-btn--secondary">Book Flight</button>
</td>
</tr>
<tr>
<td>
<label class="spark-checkbox">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane spark-icon" 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 spark-btn--secondary">Book Flight</button>
</td>
</tr>
<tr>
<td>
<label class="spark-checkbox">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane spark-icon" 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 spark-btn--secondary">Book Flight</button>
</td>
</tr>
<tr>
<td>
<label class="spark-checkbox">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane spark-icon" 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 spark-btn--secondary">Book Flight</button>
</td>
</tr>
<tr>
<td>
<label class="spark-checkbox">
<input type="checkbox" class="spark-checkbox__input">
<span class="spark-checkbox__box"></span>
</label>
</td>
<td class="spark-text-center">
<i class="spark-icon-airplane spark-icon" 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 spark-btn--secondary">Book Flight</button>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<nav class="spark-btn-group spark-mar-t-2 spark-mar-b-1">
<div class="spark-btn-group-secondary">
<button class="spark-btn spark-btn--sm spark-btn--secondary spark-modal__dismiss">Tertiary</button>
<button class="spark-btn spark-btn--sm spark-btn--secondary" onclick="return false;">Secondary</button>
</div>
<button class="spark-btn spark-btn--sm spark-btn-group-primary" onclick="return false;">Primary</button>
</nav>
</div>
</div>
</div>
<div role="tabpanel" class="spark-tabs__panel">
<div class="row">
<div class="col-xs-12 col-sm-4 spark-mar-b-1">
<img src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/tabs/animal-1.jpg" style="width: 100%;">
</div>
<div class="col-xs-12 col-sm-4 spark-mar-b-1">
<img src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/tabs/animal-2.jpg" style="width: 100%;">
</div>
<div class="col-xs-12 col-sm-4 spark-mar-b-1">
<img src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/tabs/animal-3.jpg" style="width: 100%;">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="spark-footer">
<div class="container">
<a class="spark-footer__logo spark-hidden--lte-sm" title="Sabre"><i class="spark-logo spark-logo--sabre spark-logo--xs"></i></a>
<div class="spark-footer__content">
<div class="spark-footer__copyright">
© 2015-16 Sabre <span class="spark-hidden--lte-md">Curabitur blandit tempus porttitor.</span>
</div>
<ul class="spark-footer__list">
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" href="javascript: void(0);">
Legal Policy
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" href="javascript: void(0);">
Contact Us
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" href="javascript: void(0);">
Support
</a>
</li>
</ul>
</div>
<ul class="spark-footer__list spark-footer__list--right spark-footer__list--icons">
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="Twitter" title="Twitter">
<i class="spark-icon-social-twitter spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="Facebook" title="Facebook">
<i class="spark-icon-social-facebook spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="LinkedIn" title="LinkedIn">
<i class="spark-icon-social-linkedin spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="Instagram" title="Instagram">
<i class="spark-icon-social-instagram spark-icon--fill"></i>
</a>
</li>
<li class="spark-footer__list-item">
<a class="spark-footer__list-link" aria-label="YouTube" title="YouTube">
<i class="spark-icon-social-youtube spark-icon--fill"></i>
</a>
</li>
</ul>
</div>
</footer>
</div>
<style type="text/css">
.white-bg {
background-color: #ffffff;
}
</style>
<style type="text/css">
</style>