Omnis voluptas
Help

Context-bar with back link

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">Id est</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 -->


Quasi aut
Help
porro fuga labore non

Context-bar with back link and page actions

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 eaque</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">et alias</a>
                 <a class="button button--clear button--inverse" role="button" href="../../../index.html">nam maxime</a>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- END context-bar component -->


Est cum
Help

Context-bar with back link and search

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" class="hide-element">Search field:</label>
    <div class="form-item__search_field">
      <input type="search" id="search_field" placeholder="Search for velit incidunt" />
      <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">Eos assumenda</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 -->


Mollitia officia
Help
Et excepturi

Applied filters

  • Aspernatur
  • Ab
  • Veritatis

Context-bar with back link and search with tabs

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" class="hide-element">Search field:</label>
    <div class="form-item__search_field">
      <input type="search" id="search_field" placeholder="Search for nostrum officiis" />
      <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">Et sint</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">Consequuntur sed</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">Rerum</li>
            <li class="tags__tag tag--interactive">Laudantium</li>
            <li class="tags__tag tag--interactive">Recusandae</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- END context-bar component -->