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">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 -->


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 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 -->


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">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 -->


Help

Applied filters

  • Quaerat
  • Sequi
  • Aut

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">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 -->