= ui.nfg :page_header, title: 'Page header title', subtitle: 'Small subtitle', style: "position: relative; z-index: auto"

<div class="page-header container-fluid" data-toggle="sticky-div" style="position: relative; z-index: auto">
  <div class="row">
    <div class="col col-xl-11 mx-auto">
      <div class="row align-items-center">
        <div class="col py-2">
          <div class="media">
            <div class="mt-lg-1 mr-2 h3"><i aria-hidden="true" class="fa fa-heart-o text-primary mr-0"></i></div>
            <div class="media-body">
              <h1><span class="mr-2">Page header title</span><small class="text-muted">Small subtitle</small></h1>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

= ui.nfg :page_header, title: 'Page header title without Subtitle', style: "position: relative; z-index: auto"

<div class="page-header container-fluid" data-toggle="sticky-div" style="position: relative; z-index: auto">
  <div class="row">
    <div class="col col-xl-11 mx-auto">
      <div class="row align-items-center">
        <div class="col py-2">
          <div class="media">
            <div class="mt-lg-1 mr-2 h3"><i aria-hidden="true" class="fa fa-heart-o text-primary mr-0"></i></div>
            <div class="media-body">
              <h1>Page header title without Subtitle</h1>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

= ui.nfg :page_header, title: 'Page header title', subtitle: 'Small subtitle', icon: 'info', style: "position: relative; z-index: auto"

<div class="page-header container-fluid" data-toggle="sticky-div" style="position: relative; z-index: auto">
  <div class="row">
    <div class="col col-xl-11 mx-auto">
      <div class="row align-items-center">
        <div class="col py-2">
          <div class="media">
            <div class="mt-lg-1 mr-2 h3"><i aria-hidden="true" class="fa fa-info text-primary mr-0"></i></div>
            <div class="media-body">
              <h1><span class="mr-2">Page header title</span><small class="text-muted">Small subtitle</small></h1>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

= ui.nfg :page_header, :sticky, title: 'Sticky page header title', subtitle: 'Sticky subtitle', style: "position: relative; z-index: auto"

<div class="page-header container-fluid" data-toggle="sticky-div" style="position: relative; z-index: auto">
  <div class="row">
    <div class="col col-xl-11 mx-auto">
      <div class="row align-items-center">
        <div class="col py-2">
          <div class="media">
            <div class="mt-lg-1 mr-2 h3"><i aria-hidden="true" class="fa fa-heart-o text-primary mr-0"></i></div>
            <div class="media-body">
              <h1><span class="mr-2">Sticky page header title</span><small class="text-muted">Sticky subtitle</small></h1>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

= ui.nfg :page_header, title: 'Toolbar Title', subtitle: 'Toolbar subtitle', style: "position: relative; z-index: auto" do
  = ui.nfg :button_group, :toolbar do
    = ui.nfg :button, :primary, as: :button, body: 'Button', data: { disable_with: 'Saving...' }

<div class="page-header container-fluid" data-toggle="sticky-div" style="position: relative; z-index: auto">
  <div class="row">
    <div class="col col-xl-11 mx-auto">
      <div class="row align-items-center">
        <div class="col py-2">
          <div class="media">
            <div class="mt-lg-1 mr-2 h3"><i aria-hidden="true" class="fa fa-heart-o text-primary mr-0"></i></div>
            <div class="media-body">
              <h1><span class="mr-2">Toolbar Title</span><small class="text-muted">Toolbar subtitle</small></h1>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-auto py-2">
          <div class="btn-toolbar align-items-center" role="toolbar">
            <div class="btn-group" role="group" aria-label="action buttons"><button class="btn btn-primary" data-disable-with="Saving..." type="button">Button</button></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>