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">Commodi qui</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 -->


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">Fugiat ullam</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">pariatur dolor</a>
                 <a class="button button--clear button--inverse" role="button" href="../../../index.html">non non</a>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- END context-bar component -->


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 voluptatem totam" />
      <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">Ut aut</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 -->


Help

Applied filters

  • Perspiciatis
  • Ratione
  • Quisquam

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 quia 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">Quidem quia</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">Optio velit</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">Ut</li>
            <li class="tags__tag tag--interactive">Nobis</li>
            <li class="tags__tag tag--interactive">Harum</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- END context-bar component -->