Usage: this is the default context bar. It's main purpose is to contain a back-link to the previous view and a contextual help link.
<!-- START context-bar component -->
<div class="context-bar">
<div class="context-bar__navigation">
<div class="grid-container grid-12">
<div class="grid__column-12">
<div class="context-bar__back">
<a class="context-bar__back-link icon--chevron-left-light icon-inline--left" href="/index.html">Maxime fuga</a>
</div>
<a href="/pages/nojs.html" class="context-bar-help icon--help-circle-light icon-inline--left">Help</a>
<div class="context-bar__toggles">
</div>
</div>
</div>
</div>
</div>
<!-- END context-bar component -->
Usage: used to contain actions which affect the whole view, such as initialising or ending edit mode.
<!-- START context-bar component -->
<div class="context-bar">
<div class="context-bar__navigation">
<div class="grid-container grid-12">
<div class="grid__column-12">
<div class="context-bar__back">
<a class="context-bar__back-link icon--chevron-left-light icon-inline--left" href="/index.html">Voluptatem aspernatur</a>
</div>
<a href="/pages/nojs.html" class="context-bar-help icon--help-circle-light icon-inline--left">Help</a>
<div class="context-bar__toggles">
</div>
</div>
</div>
</div>
<div class="context-bar__panels context-bar__panels--actions">
<div class="grid-container grid-12">
<div class="grid__column-12">
<div class="context-bar__panel">
<div class="context-bar__actions context-bar__actions--primary">
<a class="button button--primary" role="button" href="../../index.html">sed harum</a>
<a class="button button--clear button--inverse" role="button" href="../../index.html">vitae deserunt</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END context-bar component -->
Usage: tbd.
<!-- START context-bar component -->
<div class="context-bar">
<div class="context-bar__navigation">
<div class="grid-container grid-12">
<div class="grid__column-12">
<div class="context-bar__search">
<!-- START search component -->
<div class="form-item form-item--plain">
<label for="search_field">Search field:</label>
<div class="form-item__search_field">
<input type="search" id="search_field" placeholder="Search for quas et" />
<input type="submit" name="search_submit" value="Submit" title="Submit" />
</div>
</div>
<!-- END search component -->
</div>
<div class="context-bar__back">
<a class="context-bar__back-link icon--chevron-left-light icon-inline--left" href="/index.html">Repellat voluptatem</a>
</div>
<a href="/pages/nojs.html" class="context-bar-help icon--help-circle-light icon-inline--left">Help</a>
<div class="context-bar__toggles">
</div>
</div>
</div>
</div>
</div>
<!-- END context-bar component -->
Usage: tbd.
<!-- START context-bar component -->
<div class="context-bar">
<div class="context-bar__navigation">
<div class="grid-container grid-12">
<div class="grid__column-12">
<div class="context-bar__search">
<!-- START search component -->
<div class="form-item form-item--plain">
<label for="search_field">Search field:</label>
<div class="form-item__search_field">
<input type="search" id="search_field" placeholder="Search for doloremque rerum" />
<input type="submit" name="search_submit" value="Submit" title="Submit" />
</div>
</div>
<!-- END search component -->
</div>
<div class="context-bar__back">
<a class="context-bar__back-link icon--chevron-left-light icon-inline--left" href="/index.html">Earum ducimus</a>
</div>
<a href="/pages/nojs.html" class="context-bar-help icon--help-circle-light icon-inline--left">Help</a>
<div class="context-bar__toggles">
<a href="" class="icon--filter-light icon-inline--left toggles__tab toggle-button--active" data-toggle-target=".context-bar__panels--filters">Ut architecto</a>
</div>
</div>
</div>
</div>
<div class="context-bar__panels context-bar__panels--default context-bar__panels--filters">
<div class="grid-container grid-12">
<div class="grid__column-12">
<div class="context-bar__panel context-bar__panel--filters">
<h3 class="tags__title context-bar__panel__title">Applied filters</h3>
<ul class="tags">
<li class="tags__tag tag--interactive">Alias</li>
<li class="tags__tag tag--interactive">Culpa</li>
<li class="tags__tag tag--interactive">Eum</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- END context-bar component -->