Dependencies
This layout uses the following components as 'atoms' to create the full UI.
Extends: Objects:Top Search Bar
A search navigation bar variant used at the top of a search results page. Extends the navbar base component.
<nav class="o-navbar t-navbar-default">
<div class="o-wrapper">
<div class="o-navbar__wrapper">
<div class="o-navbar__left">
<ul class="c-pagination | o-list-inline">
<li class="c-pagination__item | o-list__item">
<button class="c-pagination__link">
<span class="u-hidden">Prev</span>
<svg class="c-icon c-icon-text" viewBox="0 0 16 16">
<path d="m3 8 8-8 1.904 1.904-6.098 6.096 6.098 6.131-1.904 1.869z"></path>
</svg>
</button>
</li>
<li class="c-pagination__item | o-list__item | u-removed-<bp3">
<button class="c-pagination__link" type="button">1</button>
</li>
<li class="c-pagination__item | o-list__item | u-removed-<bp3">
<button class="c-pagination__link">...</button>
</li>
<li class="c-pagination__item | o-list__item | u-removed-<bp3">
<button class="c-pagination__link">3</button>
</li>
<li class="c-pagination__item | o-list__item | is-current">
<button class="c-pagination__link">4</button>
</li>
<li class="c-pagination__item | o-list__item | u-removed-<bp3">
<button class="c-pagination__link">5</button>
</li>
<li class="c-pagination__item | o-list__item | u-removed-<bp3">
<button class="c-pagination__link">...</button>
</li>
<li class="c-pagination__item | o-list__item | u-removed-<bp3">
<button class="c-pagination__link" type="button">375</button>
</li>
<li class="c-pagination__item o-list__item">
<button class="c-pagination__link">
<span class="u-hidden">Next</span>
<svg class="c-icon c-icon-text" viewBox="0 0 16 16" aria-hidden="true">
<path d="m3 14.131 6.097-6.131-6.097-6.096 1.904-1.904 8 8-8 8z"></path>
</svg>
</button>
</li>
</ul>
</div>
<div class="o-navbar__right">
<ul class="o-list-inline | u-mb-0 u-space-x-sm u-flex-nowrap u-flex-fill">
<li class="o-list__item">
<select class="c-input c-input--select | u-w-100%">
<option>Least Expensive</option>
<option>Most Expensive</option>
<option>Low CO2</option>
<option>High CO2</option>
<option>Low MPG</option>
<option>High MPG</option>
<option>Mileage</option>
<option>Recently Added</option>
<option>Newest Model</option>
<option>Oldest Model</option>
</select>
</li>
<li class="o-list__item">
<button class="c-btn c-btn--primary" type="button">
<svg class="c-icon c-icon-text | u-hidden-@bp2" viewBox="0 0 16 16" aria-hidden="true">
<path d="m8 1c3.86575 0 7 .979125 7 2.1875v1.20951033c0 .05932045-.0316452.13621715-.0706816.17720532l-4.9293184 5.17578435-.25 4.375c0 .483-.783125.875-1.75.875s-1.75-.392-1.75-.875l-.25-4.375-4.92931843-5.17578435c-.03875255-.04069018-.07068157-.1203257-.07068157-.17720532v-1.20951033c0-1.208375 3.13425-2.1875 7-2.1875zm0 1c-3.3137085 0-5.80533854.54792668-6.00002726 1.25.19889545.67705829 2.68631876 1.25 6.00002726 1.25s5.7964744-.56467849 6-1.25c-.2004958-.69396034-2.6862915-1.25-6-1.25z"></path>
</svg>
<span class="u-hidden-<bp2">Filters</span>
<svg class="c-loader" viewBox="0 0 120 30">
<g fill-rule="evenodd" fill="#ffffff">
<circle class="c-dots" cx="15" cy="15" r="15"></circle>
<circle class="c-dot" cx="60" cy="15" r="15"></circle>
<circle class="c-dots" cx="105" cy="15" r="15"></circle>
</g>
</svg>
</button>
</li>
</ul>
</div>
</div>
</div>
</nav>Bottom Search Bar
A bottom search bar variant with a slightly different layout for when you hit the bottom of a set of results. Next and Previous buttons are added for quick singular lateral movement between pages/results.
<nav class="c-navbar t-navbar-default">
<div class="o-wrapper">
<div class="c-navbar__wrapper">
<div class="c-navbar__left | u-flex-fill">
<ul class="c-pagination | o-list-inline | u-w-100%">
<li class="c-pagination__item | o-list__item | u-removed-<bp3">
<button class="c-pagination__link" type="button">1</button>
</li>
<li class="c-pagination__item | o-list__item | u-removed-<bp3">
<button class="c-pagination__link" type="button">...</button>
</li>
<li class="c-pagination__item | o-list__item">
<button class="c-pagination__link" type="button">3</button>
</li>
<li class="c-pagination__item | o-list__item | is-current">
<button class="c-pagination__link" type="button">4</button>
</li>
<li class="c-pagination__item | o-list__item">
<button class="c-pagination__link" type="button">5</button>
</li>
<li class="c-pagination__item | o-list__item | u-removed-<bp3">
<button class="c-pagination__link" type="button">...</button>
</li>
<li class="c-pagination__item | o-list__item | u-removed-<bp3">
<button class="c-pagination__link" type="button">175</button>
</li>
<li class="c-pagination__item | o-list__item | u-ml-auto">
<button class="c-pagination__link" type="button">
<span>Prev</span>
</button>
</li>
<li class="c-pagination__item | o-list__item">
<button class="c-pagination__link" type="button">
<span>Next</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</nav>