non-editable

elevator_finder   

This component will return results below the filter based on the options that the user has chosen. Active, hover and static states are supplied as shown below.

Clicking the list tab to the right will display the results in a list view with no illustrative image.

This component is similar in function to the filters on the press archive pages.

If there are results based on the users filtering the below should be shown

Find your elevator

Explore our range, compare the features, experience a unique depth of design and technology.

Need help? Contact us

Low-rise
xxx-xxx
Mid-rise
xxx-xxx
High-rise
xxx-xxx
Gen2 Life

Gen2 Life

Machine-roomless elevator for residential buildings. Battery powered option available.

Rise
xxx ft
Duty
xxx - xxx lbs
Speed
xxx - xxx ft/min
SkyRise

SkyRise

High rise gearless elevator

Rise
xxx ft
Duty
xxx - xxx lbs
Speed
xxx - xxx ft/min
Gen2 Robusta

Gen2 Robusta

Machine-roomless technology for heavy duty freight applications

Rise
xxx ft
Duty
xxx - xxx lbs
Speed
xxx - xxx ft/min

Gen2 Life

Machine-roomless elevator for residential buildings. Battery powered option available.

Rise
xxx ft
Duty
xxx - xxx lbs
Speed
xxx - xxx ft/min

SkyRise

High rise gearless elevator

Rise
xxx ft
Duty
xxx - xxx lbs
Speed
xxx - xxx ft/min

Gen2 Robusta

Machine-roomless technology for heavy duty freight applications

Rise
xxx ft
Duty
xxx - xxx lbs
Speed
xxx - xxx ft/min
If no results are found - the below should show

Find your elevator

Explore our range, compare the features, experience a unique depth of design and technology.

Need help? Contact us

Low-rise
xxx-xxx
Mid-rise
xxx-xxx
High-rise
xxx-xxx

Can’t find what you’re looking for?

Finding the right product for your building is important to us

Contact your local Otis team to discuss your project and discover the lift that’s right for you. Get in touch
Copy
Edit
<pre>If there are results based on the users filtering the below should be shown</pre> <a name="maincontent"></a> <div class="toolkit_link_banner"> <div class="container"> <div class="row"> <div class="row-same-height row-full-height"> <div class="col-xs-12 col-md-7 col-full-heightcol-md-height col-lg-height"> <h1> Visit our <span>Toolkit</span> for detailed custom drawings and aesthetics </h1> </div> <div class="col-xs-12 col-md-2 col-full-heightcol-md-height col-lg-height"> <a href="/toolkit" class="otis_button btn-block"> Take me there </a> </div> </div> </div> </div> </div> <div class="breadcrumbs_wrapper hidden-xs"> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-12"> <ul class="breadcrumbs_list"> <li><a href="{{ url(App::getLocale() . '/">Home</a></li> <li><a href="#">Products</a></li> <li>Elevators</li> </ul> </div> </div> </div> </div> <div class="container-fluid elevator_finder_top"> <div class="row"> <div class="row-same-height row-full-height"> <div class="col-xs-12 col-md-6 col-full-height col-md-height col-lg-height"> <h2> Find your elevator </h2> <h3> Explore our range, compare the features, experience a unique depth of design and technology. </h3> </div> <div class="col-xs-12 col-md-6 col-full-height col-md-height col-lg-height"> <p class="help_text"> Need help? <a href="/contact" title="Contact Otis">Contact us</a> </p> </div> </div> </div> <div class="row inner-top"> <div class="col-sm-10"> <label class="hidden-sm hidden-md hidden-lg"> Filter by category </label> <div class="hidden-sm hidden-md hidden-lg otis_form"> <select id="first-choice" class="selectpicker custom-select form-control" title="Brochure category" data-size="8"> <option value="All" selected>All</option> <option value="Residential">Residential</option> <option value="Office">Office</option> <option value="Hotel">Hotel</option> <option value="Infrastructure">Infrastructure</option> </select> </div> <ul class="top-filter hidden-xs"> <li class="active">All</li> <li><a href="" title="Residential">Residential</a></li> <li><a href="" title="Office">Office</a></li> <li><a href="" title="Retail">Retail</a></li> <li><a href="" title="Hotel">Hotel</a></li> <li><a href="" title="Infrastructure">Infrastructure</a></li> </ul> </div> <div class="col-sm-2"> <ul class="view-filter"> <li class="nav nav-pills"> <a class="reset-btn" href="#">Reset <span class="close-btn"></span></a> </li> <li class="active nav nav-pills"> <a class="otis-icon-grid-normal-state" data-toggle="pill" href="#grid-view" title="Grid View"></a> </li> <li class="nav nav-pills"> <a class="otis-icon-list-normal-state" data-toggle="pill" href="#list-view" title="List View"></a> </li> </ul> </div> </div> <div class="row type_filters"> <div class="col-xs-4 col-md-1"> <div class="type-filter-checkbox"> </div> <div class="type-filter-checkbox-label"> Low-rise<br> <span>xxx-xxx</span> </div> </div> <div class="col-xs-4 col-md-1"> <div class="type-filter-checkbox"> </div> <div class="type-filter-checkbox-label"> Mid-rise<br> <span>xxx-xxx</span> </div> </div> <div class="col-xs-4 col-md-1"> <div class="type-filter-checkbox"> </div> <div class="type-filter-checkbox-label"> High-rise<br> <span>xxx-xxx</span> </div> </div> <div class="hidden-xs hidden-sm hidden-md col-lg-3"></div> <div class="col-xs-12 col-md-3 col-lg-2"> <a href="#" class="otis_button"> Battery/Solar Powered </a> </div> <div class="col-xs-12 col-md-3 col-lg-2"> <a href="#" class="otis_button"> Low Pit </a> </div> <div class="col-xs-12 col-md-2 col-lg-2"> <a href="#" class="otis_button"> Low Overhead </a> </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="tab-content"> <div id="grid-view" class="tab-pane fade in active"> <div class="col-xs-12 col-sm-6 col-md-4 product_grid_item"> <div class="product_image"> <img src="images/products/elevators/gen2-life.jpg" class="img-responsive" alt="Gen2 Life"> </div> <div class="product_description"> <h2> <a href="#">Gen2 Life</a> </h2> <p> Machine-roomless elevator for residential buildings. Battery powered option available. </p> <div class="product_snapshot"> <div class="row"> <div class="col-xs-2"> Rise<br /> <span>xxx ft</span> </div> <div class="col-xs-5"> Duty<br /> <span>xxx - xxx lbs</span> </div> <div class="col-xs-5"> Speed<br /> <span>xxx - xxx ft/min</span> </div> </div> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 product_grid_item"> <div class="product_image"> <img src="images/products/elevators/skyrise.jpg" class="img-responsive" alt="SkyRise"> </div> <div class="product_description"> <h2> <a href="#">SkyRise</a> </h2> <p> High rise gearless elevator </p> <div class="product_snapshot"> <div class="row"> <div class="col-xs-2"> Rise<br /> <span>xxx ft</span> </div> <div class="col-xs-5"> Duty<br /> <span>xxx - xxx lbs</span> </div> <div class="col-xs-5"> Speed<br /> <span>xxx - xxx ft/min</span> </div> </div> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 product_grid_item"> <div class="product_image"> <img src="images/products/elevators/gen2-robusta.jpg" class="img-responsive" alt="Gen2 Robusta"> </div> <div class="product_description"> <h2> <a href="#">Gen2 Robusta</a> </h2> <p> Machine-roomless technology for heavy duty freight applications </p> <div class="product_snapshot"> <div class="row"> <div class="col-xs-2"> Rise<br /> <span>xxx ft</span> </div> <div class="col-xs-5"> Duty<br /> <span>xxx - xxx lbs</span> </div> <div class="col-xs-5"> Speed<br /> <span>xxx - xxx ft/min</span> </div> </div> </div> </div> </div> <div class="col-xs-12 col-md-12 related_products"> <div class="row"> <div class="col-xs-12"> <div class="related_products_title"> You might also be interested in: </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="related_product_image"> <a href="#"> <img src="images/products/elevators/compass-plus.jpg" class="img-responsive"> </a> </div> <div class="related_product_content"> <h3> <a href="#">CompassPlus</a> </h3> <p> The CompassPlus System is a virtual concierge </p> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="related_product_image"> <a href="#"> <img src="images/products/elevators/eCall.jpg" class="img-responsive"> </a> </div> <div class="related_product_content"> <h3> <a href="#">eCall</a> </h3> <p> Otis eCall connects with your smart phone to remotely call your elevator </p> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="related_product_image"> <a href="#"> <img src="images/products/elevators/eView.jpg" class="img-responsive"> </a> </div> <div class="related_product_content"> <h3> <a href="#">eView</a> </h3> <p> Simply one, very smart display. eView connects everything that matters </p> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="related_product_image"> <a href="#"> <img src="images/products/elevators/OneCall.jpg" class="img-responsive"> </a> </div> <div class="related_product_content"> <h3> <a href="#">OneCall</a> </h3> <p> The intuitive OneCall destination management system </p> </div> </div> </div> </div> </div> <div id="list-view" class="tab-pane fade"> <div class="container-fluid"> <div class="row list-block"> <div class="row-same-height row-full-height"> <div class="col-xs-12 col-sm-12 col-md-6 col-full-height col-md-height col-lg-height col-middle"> <div class="inner-content"> <h2> Gen2 Life </h2> <p> Machine-roomless elevator for residential buildings. Battery powered option available. </p> </div> </div> <div class="col-xs-4 col-md-1 col-full-height col-md-height col-lg-height col-middle btns-col"> Rise<br /> <span>xxx ft</span> </div> <div class="col-xs-4 col-md-1 col-full-height col-md-height col-lg-height col-middle btns-col"> Duty<br /> <span>xxx - xxx lbs</span> </div> <div class="col-xs-4 col-md-1 col-full-height col-md-height col-lg-height col-middle btns-col"> Speed<br /> <span>xxx - xxx ft/min</span> </div> <div class="col-xs-12 col-sm-12 col-md-2 col-full-height col-md-height col-lg-height col-middle btns-col"> <a href="#" class="otis_button btn-block"> Select </a> </div> </div> </div> <div class="row list-block"> <div class="row-same-height row-full-height"> <div class="col-xs-12 col-sm-12 col-md-6 col-full-height col-md-height col-lg-height col-middle"> <div class="inner-content"> <h2> SkyRise </h2> <p> High rise gearless elevator </p> </div> </div> <div class="col-xs-4 col-md-1 col-full-height col-md-height col-lg-height col-middle btns-col"> Rise<br /> <span>xxx ft</span> </div> <div class="col-xs-4 col-md-1 col-full-height col-md-height col-lg-height col-middle btns-col"> Duty<br /> <span>xxx - xxx lbs</span> </div> <div class="col-xs-4 col-md-1 col-full-height col-md-height col-lg-height col-middle btns-col"> Speed<br /> <span>xxx - xxx ft/min</span> </div> <div class="col-xs-12 col-sm-12 col-md-2 col-full-height col-md-height col-lg-height col-middle btns-col"> <a href="#" class="otis_button btn-block"> Select </a> </div> </div> </div> <div class="row list-block"> <div class="row-same-height row-full-height"> <div class="col-xs-12 col-sm-12 col-md-6 col-full-height col-md-height col-lg-height col-middle"> <div class="inner-content"> <h2> Gen2 Robusta </h2> <p> Machine-roomless technology for heavy duty freight applications </p> </div> </div> <div class="col-xs-4 col-md-1 col-full-height col-md-height col-lg-height col-middle btns-col"> Rise<br /> <span>xxx ft</span> </div> <div class="col-xs-4 col-md-1 col-full-height col-md-height col-lg-height col-middle btns-col"> Duty<br /> <span>xxx - xxx lbs</span> </div> <div class="col-xs-4 col-md-1 col-full-height col-md-height col-lg-height col-middle btns-col"> Speed<br /> <span>xxx - xxx ft/min</span> </div> <div class="col-xs-12 col-sm-12 col-md-2 col-full-height col-md-height col-lg-height col-middle btns-col"> <a href="#" class="otis_button btn-block"> Select </a> </div> </div> </div> <div class="col-xs-12 col-md-12 related_products"> <div class="row"> <div class="col-xs-12"> <div class="related_products_title"> You might also be interested in: </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="related_product_content"> <h3> <a href="#">CompassPlus</a> </h3> <p> The CompassPlus System is a virtual concierge </p> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="related_product_content"> <h3> <a href="#">eCall</a> </h3> <p> Otis eCall connects with your smart phone to remotely call your elevator </p> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="related_product_content"> <h3> <a href="#">eView</a> </h3> <p> Simply one, very smart display. eView connects everything that matters </p> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="related_product_content"> <h3> <a href="#">OneCall</a> </h3> <p> The intuitive OneCall destination management system </p> </div> </div> </div> </div> </div> </div> </div> </div> </div> <pre>If no results are found - the below should show</pre> <div class="breadcrumbs_wrapper hidden-xs"> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-12"> <ul class="breadcrumbs_list"> <li><a href="{{ url(App::getLocale() . '/">Home</a></li> <li><a href="#">Products</a></li> <li>Elevators</li> </ul> </div> </div> </div> </div> <div class="container-fluid elevator_finder_top"> <div class="row"> <div class="row-same-height row-full-height"> <div class="col-xs-12 col-md-6 col-full-height col-md-height col-lg-height"> <h2> Find your elevator </h2> <h3> Explore our range, compare the features, experience a unique depth of design and technology. </h3> </div> <div class="col-xs-12 col-md-6 col-full-height col-md-height col-lg-height"> <p class="help_text"> Need help? <a href="/contact" title="Contact Otis">Contact us</a> </p> </div> </div> </div> <div class="row inner-top"> <div class="col-sm-10"> <label class="hidden-sm hidden-md hidden-lg"> Filter by category </label> <div class="hidden-sm hidden-md hidden-lg otis_form"> <select id="first-choice" class="selectpicker custom-select form-control" title="Brochure category" data-size="8"> <option value="All" selected>All</option> <option value="Residential">Residential</option> <option value="Office">Office</option> <option value="Hotel">Hotel</option> <option value="Infrastructure">Infrastructure</option> </select> </div> <ul class="top-filter hidden-xs"> <li class="active">All</li> <li><a href="" title="Residential">Residential</a></li> <li><a href="" title="Office">Office</a></li> <li><a href="" title="Retail">Retail</a></li> <li><a href="" title="Hotel">Hotel</a></li> <li><a href="" title="Infrastructure">Infrastructure</a></li> </ul> </div> <div class="col-sm-2"> <ul class="view-filter"> <li class="nav nav-pills"> <a class="reset-btn" href="#">Reset <span class="close-btn"></span></a> </li> <li class="active nav nav-pills"> <a class="otis-icon-grid-normal-state" data-toggle="pill" href="#grid-view" title="Grid View"></a> </li> <li class="nav nav-pills"> <a class="otis-icon-list-normal-state" data-toggle="pill" href="#list-view" title="List View"></a> </li> </ul> </div> </div> <div class="row type_filters"> <div class="col-xs-4 col-md-1"> <div class="type-filter-checkbox"> </div> <div class="type-filter-checkbox-label"> Low-rise<br> <span>xxx-xxx</span> </div> </div> <div class="col-xs-4 col-md-1"> <div class="type-filter-checkbox"> </div> <div class="type-filter-checkbox-label"> Mid-rise<br> <span>xxx-xxx</span> </div> </div> <div class="col-xs-4 col-md-1"> <div class="type-filter-checkbox"> </div> <div class="type-filter-checkbox-label"> High-rise<br> <span>xxx-xxx</span> </div> </div> <div class="hidden-xs hidden-sm hidden-md col-lg-3"></div> <div class="col-xs-12 col-md-3 col-lg-2"> <a href="#" class="otis_button"> Battery/Solar Powered </a> </div> <div class="col-xs-12 col-md-3 col-lg-2"> <a href="#" class="otis_button"> Low Pit </a> </div> <div class="col-xs-12 col-md-2 col-lg-2"> <a href="#" class="otis_button"> Low Overhead </a> </div> </div> </div> <div class="background-wrapper"> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-8 col-md-offset-2"> <div class="full_width_strip wow fadeIn animated" style="visibility: visible; animation-name: fadeIn;"> <h2> Can’t find what you’re looking for? </h2> <h3> Finding the right product for your building is important to us </h3> Contact your local Otis team to discuss your project and discover the lift that’s right for you. <a href="/contact" class="otis_button "> Get in touch </a> </div> </div> </div> </div> </div>
Copy
Copy
Edit
.toolkit_link_banner { background-color: $primaryColor; padding: 30px 0; h1 { font-size: $baseFontSize * 1.4; font-family: $fontThin; color: $tertiaryColor; text-align: center; @media only screen and ($small-desktop) { text-align: left; } span { font-family: $fontRegular; } @media only screen and ($small-desktop) { font-size: $baseFontSize * 2; } } } .elevator_finder_top { h2 { font-size: $baseFontSize * 2; font-family: $fontThin; color: $otisBlack; margin: 20px 0 10px; text-align: center; @media only screen and ($tablet-viewport) { font-size: $baseFontSize * 2.2; } @media only screen and ($small-desktop) { font-size: $baseFontSize * 3; margin-top: 30px; text-align: left; } } h3 { font-size: $baseFontSize; font-family: $fontThin; color: $otisBlack; line-height: 1em; margin-bottom: 10px; text-align: center; @media only screen and ($small-desktop) { font-size: $baseFontSize * 1.4; margin: 0; text-align: left; } @media only screen and ($small-desktop) { margin-top: 15px; } } label { font-size: $baseFontSize; font-family: $fontThin; color: $otisBlack; margin-bottom: 10px; text-align: center; display: block; margin: 15px 0 0; width: 100%; } .help_text { font-size: $baseFontSize * 1.2; text-align: center; font-family: $fontThin; @media only screen and ($small-desktop) { font-size: $baseFontSize * 1.6; text-align: right; float: right; } a { color: $primaryColor; text-decoration: underline; } } .otis_form { padding: 0 0 10px 0; .custom-select { border: 1px solid $otisLightGrey; } } .top-filter { margin: 40px 0; li { display: inline-block; font-family: $fontThin; font-size: $baseFontSize * 1.2; margin: 0 20px 0 0; position: relative; @media only screen and ($small-desktop) { font-size: $baseFontSize * 1.5; } &.active { font-family: $fontBold; padding: 0 0 5px 0; border-bottom: 2px solid $otisBlack; } &.arrow-bottom { &:after { content: ""; position: absolute; bottom: -22px; left: 0; right: 0; display: block; margin: 0 auto; height: 0; width: 0; border-color: transparent transparent $otisBeige; border-style: solid; border-width: 0 10px 10px; } } } a { @include multiTransition; text-decoration: none; color: $otisBlack; &:hover { color: $otisLightGrey; } } } .view-filter { text-align: center; margin: 10px 0 30px; @media only screen and ($tablet-viewport) { float: right; margin: 40px 0 0; } .reset-btn { margin-top: -5px; display: inline-block; vertical-align: middle; color: #000; font-family: $fontLight; margin-right: 10px; } .close-btn { background-image: url('../images/about-us/meet-the-team/close-btn.svg'); background-repeat: no-repeat; background-size: cover; width: 18px; height: 18px; display: inline-block; vertical-align: middle; margin-left: 5px; } li { display: inline-block; margin: 20px 0 0 10px; color: $otisLightGrey; a { color: $otisLightGrey; text-decoration: none; &:before { font-size: $baseFontSize * 1.125; } &:hover { color: $otisDarkGrey; cursor: pointer; } &:hover, &:focus { outline: none; } } @media only screen and ($tablet-viewport) { margin: 5px 0 0 10px; } &.active { a { color: $otisDarkGrey; } } } } .type_filters { margin-bottom: 40px; .type-filter-checkbox { border: 1px solid $primaryColor; width: 40px; height: 40px; margin: 0 auto; cursor: pointer; @media only screen and ($tablet-viewport) { float: left; margin: 0 10px 0 0; } &.checkbox-active { background-image: url(../images/components/elevators-checkmark.png); background-size: 80% auto; background-position: center center; background-repeat: no-repeat; } } .type-filter-checkbox-label { font-family: $fontThin; text-align: center; @media only screen and ($tablet-viewport) { text-align: left; } span { font-family: $fontBold; } } .otis_button { @include otisButton($primaryColor); width: 100%; padding: 5px 20px; } } } .product_grid_item { padding-right: 0; padding-left: 0; border-right: 1px solid $tertiaryColor; background-color: $primaryColor; a { color: $tertiaryColor; &:hover { color: $tertiaryColor; } } .product_image { overflow: hidden; max-height: 200px; } .product_description { background-color: $primaryColor; color: $tertiaryColor; padding: 20px; .product_snapshot { margin-top: 20px; padding: 10px 0; border-top: 1px solid $tertiaryColor; border-bottom: 1px solid $tertiaryColor; } } } .related_products { padding: 0 60px 60px; .related_products_title { padding: 30px 0; font-family: $fontBold; } .related_product_image { max-height: 150px; overflow: hidden; } .related_product_content { padding-bottom: 30px; h3 { font-family: $fontRegular; font-weight: normal; font-size: $baseFontSize * 1.6; padding: 15px 0; a { color: $primaryColor; } } p { font-family: $fontThin; font-size: $baseFontSize; } } }

result_strip   

The Result Strip component

1. Products - Gen2

1. Products - Gen2

Category: Page

Smooth. Green. Reliable. A system that moves elevator innovation to a new level, supporting your design vision in a way that only Otis can...

Copy
Edit
<div class="result_strip"> <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 result_image"> <img src="images/search-results/result-image-1.jpg" class="img-responsive" alt="1. Products - Gen2"> </div> <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9"> <h3> <a href="#" title="1. Products - Gen2">1. Products - Gen2</a> </h3> <span class="search_category"> Category: <a href="#" title="Page">Page</a> </span> <p> Smooth. Green. Reliable. A system that moves elevator innovation to a new level, supporting your design vision in a way that only Otis can... </p> <a href="#" class="search_link hidden-xs" title="www.otis.com/gen2"> www.otis.com/gen2 </a> <a class="otis_button hidden-sm hidden-md hidden-lg" title="View Result"> View Result </a> </div> <div class="clearfix"></div> </div>
Copy
Copy
Edit

( ! ) Warning: file_get_contents(../scss/non-editable/_result_strip.scss): failed to open stream: No such file or directory in /home/forge/otis-styleguide.dev.jbspace.com/public/styleguide/atomic-core/index.php on line 360
Call Stack
#TimeMemoryFunctionLocation
10.0000232104{main}( ).../index.php:0
20.0035315264file_get_contents ( ).../index.php:360

pagination   

The Pagination component

Copy
Edit
<div class="row"> <div class="row-same-height row-full-height"> <div class="col-xs-5 col-sm-6 col-full-height col-xs-height col-sm-height col-md-height col-lg-height col-bottom"> <ul class="pagination"> <li class="prev disabled"><a href="" title="Previous">&lt;</a></li> <li class="active">1</li> <li><a href="" title="2">2</a></li> <li><a href="" title="3">3</a></li> <li><a href="" title="4">4</a></li> <li><a href="" title="5">5</a></li> <li><a href="" title="6">6</a></li> <li><a href="" title="7">7</a></li> <li class="total">7</li> <li class="next"><a href="" title="Next">&gt;</a></li> </ul> </div> </div> </div>
Copy
Copy
Edit

( ! ) Warning: file_get_contents(../scss/non-editable/_pagination.scss): failed to open stream: No such file or directory in /home/forge/otis-styleguide.dev.jbspace.com/public/styleguide/atomic-core/index.php on line 360
Call Stack
#TimeMemoryFunctionLocation
10.0000232104{main}( ).../index.php:0
20.0038308152file_get_contents ( ).../index.php:360

header_section   

The Header Section component

2016 Press Archive

Copy
Edit
<div class="container-fluid header_section_wrapper"> <!--Requires press-archive.js--> <div class="row inner-top includes-sub-filter"> <div class="col-sm-10"> <h2 class="hidden-sm hidden-md hidden-lg"> Filter by month </h2> <div class="m-filter-select hidden-sm hidden-md hidden-lg"> <div class="btn-group bootstrap-select custom-select form-control"><button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="All"><span class="filter-option pull-left">All</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span></button><div class="dropdown-menu open"><ul class="dropdown-menu inner" role="menu"><li class="dropdown-header " data-optgroup="1"><span class="text">2016</span></li><li data-original-index="0" data-optgroup="1" class="selected"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">All</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="1" data-optgroup="1"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">January</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="2" data-optgroup="1"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">February</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="3" data-optgroup="1"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">March</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="4" data-optgroup="1"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">April</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="5" data-optgroup="1"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">May</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li class="divider" data-optgroup="2div"></li><li class="dropdown-header " data-optgroup="2"><span class="text">2015</span></li><li data-original-index="6" data-optgroup="2"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">All</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="7" data-optgroup="2"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">January</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="8" data-optgroup="2"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">February</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="9" data-optgroup="2"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">March</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="10" data-optgroup="2"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">April</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="11" data-optgroup="2"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">May</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="12" data-optgroup="2"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">June</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="13" data-optgroup="2"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">July</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="14" data-optgroup="2"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">August</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="15" data-optgroup="2"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">September</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="16" data-optgroup="2"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">October</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="17" data-optgroup="2"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">November</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="18" data-optgroup="2"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">December</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li class="divider" data-optgroup="3div"></li><li class="dropdown-header " data-optgroup="3"><span class="text">2014</span></li><li data-original-index="19" data-optgroup="3"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">All</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="20" data-optgroup="3"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">January</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="21" data-optgroup="3"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">February</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="22" data-optgroup="3"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">March</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="23" data-optgroup="3"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">April</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="24" data-optgroup="3"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">May</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="25" data-optgroup="3"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">June</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="26" data-optgroup="3"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">July</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="27" data-optgroup="3"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">August</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="28" data-optgroup="3"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">September</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="29" data-optgroup="3"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">October</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="30" data-optgroup="3"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">November</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="31" data-optgroup="3"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">December</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li class="divider" data-optgroup="4div"></li><li class="dropdown-header " data-optgroup="4"><span class="text">2013</span></li><li data-original-index="32" data-optgroup="4"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">All</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="33" data-optgroup="4"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">January</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="34" data-optgroup="4"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">February</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="35" data-optgroup="4"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">March</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="36" data-optgroup="4"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">April</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="37" data-optgroup="4"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">May</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="38" data-optgroup="4"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">June</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="39" data-optgroup="4"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">July</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="40" data-optgroup="4"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">August</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="41" data-optgroup="4"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">September</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="42" data-optgroup="4"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">October</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="43" data-optgroup="4"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">November</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="44" data-optgroup="4"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">December</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li class="divider" data-optgroup="5div"></li><li class="dropdown-header " data-optgroup="5"><span class="text">2012</span></li><li data-original-index="45" data-optgroup="5"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">All</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="46" data-optgroup="5"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">January</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="47" data-optgroup="5"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">February</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="48" data-optgroup="5"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">March</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="49" data-optgroup="5"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">April</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="50" data-optgroup="5"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">May</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="51" data-optgroup="5"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">June</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="52" data-optgroup="5"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">July</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="53" data-optgroup="5"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">August</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="54" data-optgroup="5"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">September</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="55" data-optgroup="5"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">October</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="56" data-optgroup="5"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">November</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="57" data-optgroup="5"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">December</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li class="divider" data-optgroup="6div"></li><li class="dropdown-header " data-optgroup="6"><span class="text">2011</span></li><li data-original-index="58" data-optgroup="6"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">All</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="59" data-optgroup="6"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">January</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="60" data-optgroup="6"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">February</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="61" data-optgroup="6"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">March</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="62" data-optgroup="6"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">April</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="63" data-optgroup="6"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">May</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="64" data-optgroup="6"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">June</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="65" data-optgroup="6"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">July</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="66" data-optgroup="6"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">August</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="67" data-optgroup="6"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">September</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="68" data-optgroup="6"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">October</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="69" data-optgroup="6"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">November</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="70" data-optgroup="6"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">December</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li class="divider" data-optgroup="7div"></li><li class="dropdown-header " data-optgroup="7"><span class="text">2010</span></li><li data-original-index="71" data-optgroup="7"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">All</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="72" data-optgroup="7"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">January</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="73" data-optgroup="7"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">February</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="74" data-optgroup="7"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">March</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="75" data-optgroup="7"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">April</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="76" data-optgroup="7"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">May</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="77" data-optgroup="7"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">June</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="78" data-optgroup="7"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">July</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="79" data-optgroup="7"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">August</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="80" data-optgroup="7"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">September</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="81" data-optgroup="7"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">October</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="82" data-optgroup="7"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">November</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="83" data-optgroup="7"><a tabindex="0" class="opt " style="" data-tokens="null"><span class="text">December</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li></ul></div><select class="selectpicker custom-select form-control" data-size="11" tabindex="-98"> <optgroup label="2016"> <option value="All" selected="">All</option> <option value="jan">January</option> <option value="feb">February</option> <option value="mar">March</option> <option value="apr">April</option> <option value="may">May</option> </optgroup> <optgroup label="2015"> <option value="all">All</option> <option value="jan">January</option> <option value="feb">February</option> <option value="mar">March</option> <option value="apr">April</option> <option value="may">May</option> <option value="jun">June</option> <option value="jul">July</option> <option value="aug">August</option> <option value="sep">September</option> <option value="oct">October</option> <option value="nov">November</option> <option value="dec">December</option> </optgroup> <optgroup label="2014"> <option value="all">All</option> <option value="jan">January</option> <option value="feb">February</option> <option value="mar">March</option> <option value="apr">April</option> <option value="may">May</option> <option value="jun">June</option> <option value="jul">July</option> <option value="aug">August</option> <option value="sep">September</option> <option value="oct">October</option> <option value="nov">November</option> <option value="dec">December</option> </optgroup> <optgroup label="2013"> <option value="all">All</option> <option value="jan">January</option> <option value="feb">February</option> <option value="mar">March</option> <option value="apr">April</option> <option value="may">May</option> <option value="jun">June</option> <option value="jul">July</option> <option value="aug">August</option> <option value="sep">September</option> <option value="oct">October</option> <option value="nov">November</option> <option value="dec">December</option> </optgroup> <optgroup label="2012"> <option value="all">All</option> <option value="jan">January</option> <option value="feb">February</option> <option value="mar">March</option> <option value="apr">April</option> <option value="may">May</option> <option value="jun">June</option> <option value="jul">July</option> <option value="aug">August</option> <option value="sep">September</option> <option value="oct">October</option> <option value="nov">November</option> <option value="dec">December</option> </optgroup> <optgroup label="2011"> <option value="all">All</option> <option value="jan">January</option> <option value="feb">February</option> <option value="mar">March</option> <option value="apr">April</option> <option value="may">May</option> <option value="jun">June</option> <option value="jul">July</option> <option value="aug">August</option> <option value="sep">September</option> <option value="oct">October</option> <option value="nov">November</option> <option value="dec">December</option> </optgroup> <optgroup label="2010"> <option value="all">All</option> <option value="jan">January</option> <option value="feb">February</option> <option value="mar">March</option> <option value="apr">April</option> <option value="may">May</option> <option value="jun">June</option> <option value="jul">July</option> <option value="aug">August</option> <option value="sep">September</option> <option value="oct">October</option> <option value="nov">November</option> <option value="dec">December</option> </optgroup> </select></div> </div> <ul class="top-filter hidden-xs"> <li class="active arrow-bottom"> <a href="#filter-2016" data-toggle="collapse">2016</a> </li> <li><a href="#filter-2015" data-toggle="collapse">2015</a></li> <li><a href="#filter-2014" data-toggle="collapse">2014</a></li> <li><a href="#filter-2013" data-toggle="collapse">2013</a></li> <li><a href="#filter-2012" data-toggle="collapse">2012</a></li> <li><a href="#filter-2011" data-toggle="collapse">2011</a></li> <li><a href="#filter-2010" data-toggle="collapse">2010</a></li> </ul> </div> <div class="col-sm-2"> <ul class="view-filter"> <li class="active nav nav-pills"> <a class="otis-icon-grid-normal-state" data-toggle="pill" href="#grid-view"></a> </li> <li class="nav nav-pills"> <a class="otis-icon-list-normal-state" data-toggle="pill" href="#list-view"></a> </li> </ul> </div> <div class="col-xs-12 collapsed-filter hidden-xs"> <ul class="collapse in" id="filter-2016"> <li class="active"><a href="" title="All">All</a></li> <li><a href="" title="January">January</a></li> <li><a href="" title="February">February</a></li> <li><a href="" title="March">March</a></li> <li><a href="" title="April">April</a></li> <li><a href="" title="May">May</a></li> </ul> <ul class="collapse" id="filter-2015"> <li class="active"><a href="" title="All">All</a></li> <li><a href="" title="January">January</a></li> <li><a href="" title="February">February</a></li> <li><a href="" title="March">March</a></li> <li><a href="" title="April">April</a></li> <li><a href="" title="May">May</a></li> <li><a href="" title="June">June</a></li> <li><a href="" title="July">July</a></li> <li><a href="" title="August">August</a></li> <li><a href="" title="September">September</a></li> <li><a href="" title="October">October</a></li> <li><a href="" title="November">November</a></li> <li><a href="" title="December">December</a></li> </ul> <ul class="collapse" id="filter-2014"> <li class="active"><a href="" title="All">All</a></li> <li><a href="" title="January">January</a></li> <li><a href="" title="February">February</a></li> <li><a href="" title="March">March</a></li> <li><a href="" title="April">April</a></li> <li><a href="" title="May">May</a></li> <li><a href="" title="June">June</a></li> <li><a href="" title="July">July</a></li> <li><a href="" title="August">August</a></li> <li><a href="" title="September">September</a></li> <li><a href="" title="October">October</a></li> <li><a href="" title="November">November</a></li> <li><a href="" title="December">December</a></li> </ul> <ul class="collapse" id="filter-2013"> <li class="active"><a href="" title="All">All</a></li> <li><a href="" title="January">January</a></li> <li><a href="" title="February">February</a></li> <li><a href="" title="March">March</a></li> <li><a href="" title="April">April</a></li> <li><a href="" title="May">May</a></li> <li><a href="" title="June">June</a></li> <li><a href="" title="July">July</a></li> <li><a href="" title="August">August</a></li> <li><a href="" title="September">September</a></li> <li><a href="" title="October">October</a></li> <li><a href="" title="November">November</a></li> <li><a href="" title="December">December</a></li> </ul> <ul class="collapse" id="filter-2012"> <li class="active"><a href="" title="All">All</a></li> <li><a href="" title="January">January</a></li> <li><a href="" title="February">February</a></li> <li><a href="" title="March">March</a></li> <li><a href="" title="April">April</a></li> <li><a href="" title="May">May</a></li> <li><a href="" title="June">June</a></li> <li><a href="" title="July">July</a></li> <li><a href="" title="August">August</a></li> <li><a href="" title="September">September</a></li> <li><a href="" title="October">October</a></li> <li><a href="" title="November">November</a></li> <li><a href="" title="December">December</a></li> </ul> <ul class="collapse" id="filter-2011"> <li class="active"><a href="" title="All">All</a></li> <li><a href="" title="January">January</a></li> <li><a href="" title="February">February</a></li> <li><a href="" title="March">March</a></li> <li><a href="" title="April">April</a></li> <li><a href="" title="May">May</a></li> <li><a href="" title="June">June</a></li> <li><a href="" title="July">July</a></li> <li><a href="" title="August">August</a></li> <li><a href="" title="September">September</a></li> <li><a href="" title="October">October</a></li> <li><a href="" title="November">November</a></li> <li><a href="" title="December">December</a></li> </ul> <ul class="collapse" id="filter-2010"> <li class="active"><a href="" title="All">All</a></li> <li><a href="" title="January">January</a></li> <li><a href="" title="February">February</a></li> <li><a href="" title="March">March</a></li> <li><a href="" title="April">April</a></li> <li><a href="" title="May">May</a></li> <li><a href="" title="June">June</a></li> <li><a href="" title="July">July</a></li> <li><a href="" title="August">August</a></li> <li><a href="" title="September">September</a></li> <li><a href="" title="October">October</a></li> <li><a href="" title="November">November</a></li> <li><a href="" title="December">December</a></li> </ul> </div> </div> <div class="row"> <div class="row-same-height row-full-height"> <div class="col-xs-7 col-sm-6 col-full-height col-xs-height col-sm-height col-md-height col-lg-height col-bottom"> <h2 class="noMargin"> 2016 Press Archive </h2> </div> <div class="col-xs-5 col-sm-6 col-full-height col-xs-height col-sm-height col-md-height col-lg-height col-bottom"> <ul class="pagination"> <li class="prev disabled"><a href="" title="Previous">&lt;</a></li> <li class="active">1</li> <li><a href="" title="2">2</a></li> <li><a href="" title="3">3</a></li> <li><a href="" title="4">4</a></li> <li><a href="" title="5">5</a></li> <li><a href="" title="6">6</a></li> <li><a href="" title="7">7</a></li> <li class="total">7</li> <li class="next"><a href="" title="Next">&gt;</a></li> </ul> </div> </div> </div> </div>
Copy
Copy
Edit

( ! ) Warning: file_get_contents(../scss/non-editable/_header_section.scss): failed to open stream: No such file or directory in /home/forge/otis-styleguide.dev.jbspace.com/public/styleguide/atomic-core/index.php on line 360
Call Stack
#TimeMemoryFunctionLocation
10.0000232104{main}( ).../index.php:0
20.0045357712file_get_contents ( ).../index.php:360

header-elements   

The Header Elements component

Copy
Edit
<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <div class="header-elements"> <div class="m-filter-header"> <label for="category">Category</label> </div> <div class="m-filter-select"> <select name="category"> <option value="Date" selected>All Categories</option> <option value="Date">Category One</option> <option value="Date">Category Two</option> <option value="Date">Category Three</option> <option value="Date">Category Four</option> </select> </div> <div id="top-lists" class="top-lists"> <ul class="left" role="tablist"> <li class="active"> <a href="#cat-all-tab" aria-controls="cat-all-tab" role="tab" data-toggle="tab" title="@lang('faqs.all_faqs')">All Categories</a> </li> <li> <a href="#cat-1-tab" aria-controls="cat-all-tab" role="tab" data-toggle="tab" title="@lang('faqs.category_one')">Category One</a> </li> <li> <a href="#cat-2-tab" aria-controls="cat-all-tab" role="tab" data-toggle="tab" title="@lang('faqs.category_two')">Category Two</a> </li> <li> <a href="#cat-3-tab" aria-controls="cat-all-tab" role="tab" data-toggle="tab" title="@lang('faqs.category_three')">Category Three</a> </li> <li> <a href="#cat-4-tab" aria-controls="cat-all-tab" role="tab" data-toggle="tab" title="@lang('faqs.category_four')">Category Four</a> </li> </ul> <div class="clearfix"></div> </div> </div> </div> </div> </div>
Copy
Copy
Edit

( ! ) Warning: file_get_contents(../scss/non-editable/_header-elements.scss): failed to open stream: No such file or directory in /home/forge/otis-styleguide.dev.jbspace.com/public/styleguide/atomic-core/index.php on line 360
Call Stack
#TimeMemoryFunctionLocation
10.0000232104{main}( ).../index.php:0
20.0047327096file_get_contents ( ).../index.php:360