Panel Header

The Panel Header is a header organism that is placed at the start of a Panel template.

The panel header consists of a main heading (with icon, h2 heading and optional subheading) and optional back link, action items and input field.

Panel Header - Type 1

This header starts with an optional top row that contains the back link and/or action items. The next row contains the main heading, which consists of an icon, h2 subheading and optional subheading.

Helix note: Add the has-fixed-height class to the hx-panel-header for a fixed header height of 110px. The base body/html font is 15px rather than 16px as used this document.

Examples

    
       <div class="hx-panel-header has-fixed-height">
            <div class="hx-panel-header-row">
              <a class="hx-button hx-panel-back is-flat is-small pl-1">
                <i class="hx-icon icon-angle-left"></i>
                <div class="hx-panel-back-text">
                Back
                </div>
              </a>
              <div class="hx-panel-header-row-actions">
                <a class="hx-button is-small">Action</a>
                <a class="hx-button is-small is-white px-1">
                  <i class="hx-icon is-medium icon-close-empty"></i>
                </a>
              </div>
            </div>
            <div class="hx-panel-header-row">
              <div class="hx-flex-column">
                <div class="hx-panel-header-heading">
                  <i class="hx-icon icon-prescription is-heading-icon"></i>
                  <div class="h2">
                    Prescription
                  </div>
                </div>
                <div class="hx-panel-header-subheading">
                  Prescription subheading
                </div>
              </div>
            </div>
          </div>
      
  

Panel Header - Type 2

This header consists of two rows - the first row contains the main heading (icon and h2 heading, plus optional action buttons/icons) and the second row contains a full width input field. Each row takes up about half the height of the panel.

    
        <div class="hx-panel">
          <div class="hx-panel-header has-fixed-height">
            <div class="hx-panel-header-row">
              <div class="hx-panel-header-heading">
                <i class="hx-icon icon-file-outline is-heading-icon"></i>
                <div class="h2">
                  Letter Creator
                </div>
              </div>
              <div class="hx-panel-header-row-actions">
                <a class="hx-button is-small is-white px-1">
                  <i class="hx-icon is-medium icon-close-empty"></i>
                </a>
              </div>
            </div>
            <div class="hx-panel-header-row has-search hx-flex-column">
              <div class="hx-input-group">
                <i class="hx-icon icon-search"></i>
                <div class="hx-input-control">
                  <input class="hx-input" type="text" required="">
                  <label class="hx-label"></label>
                  <div class="hx-help"></div>
                </div>
                <div class="hx-input-actions">
                  <div class="hx-button-group">
                    <button class="hx-button is-flat">
                      <span class="hx-icon-control"><i class="icon icon-close-empty"></i></span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>