Headers - Flex UI Library

Headers

Standard Header

<div class="c-header">
  <div class="c-header__title t-title--larger"> Standard Header </div>
</div>

Implementation Notes

Standard Header is intended to be used full-width.

Sticky Header

Example

Sticky Header Example (Opens in new window.)

Code

The HTML must be structured in the following manner. The contents can obviously differ, but the structure must follow this example.

<div class="content-container" id="contentContainer">
  <div class="c-sticky__header">
    <div class="c-sticky__banner">
      <a class="u-link--plain u-link--breadcrumb">
        <span class="flexicon flexicon-180 flexicon-chevron"></span>
        Back
      </a>
      <div class="t-title--larger">
        Banner with a super long title to check multiple lines
      </div>
    </div>
    <div class="c-sticky__content">
      <div class="c-sticky__content-left">
        <button class="btn btn-primary btn-sm" type="button"> Filters &middot; 3 </button>
      </div>
      <div class="c-sticky__content-right">
        <button class="btn btn-secondary btn-sm" type="button"> Save Search </button>
        <button class="btn btn-secondary btn-sm" type="button"> More </button>
      </div>
    </div>
    <div class="c-sticky__subcontent">
      <div class="c-section__separator"></div>
      <div class="c-sticky__flash">
        A flash message can appear here.
      </div>
      <div class="c-sticky__features">
        <div>Viewing (x) of (y) listings</div>
        <div>Sorted by: &lt;sort style&gt;</div>
      </div>
    </div>
  </div>

  <div class="content">
  </div>
</div>

.content-container: Must have 'width' set on this container if other than 100%.
.c-sticky__header: Has z-index: 10000 so content will scroll underneath it.

The following JavaScript must be called once the document is ready for processing. The exact element, .c-sticky__header must be specified as the selector.

var options = {
  containerSel: '#contentContainer',
  mainMenuSel: '#mainMenu'
};
$('.c-sticky__header').flexStickyHeader(options);