Page Header

Basic Header

    
      <div class="atp-header">
    <div class="container">
      <div class="row">
        <div class="col d-flex align-items-start order-1 order-md-0">
  
          <h1 class="order-1">
            Main Heading 
          </h1>
  
        </div>
      </div>
    </div>
  </div>

Header with Subheading

Basic page header including a subhead style.

View in new window

    
      <div class="atp-header">
    <div class="container">
      <div class="row">
        <div class="col d-flex align-items-start order-1 order-md-0">
  
          <h1 class="order-1">
            Main Heading 
            <span>Subheading Text</span>
          </h1>
  
        </div>
      </div>
    </div>
  </div>

Header with back button

Basic page header with accompanying back navigation button.

View in new window

    
      <div class="atp-header">
    <div class="container">
      <div class="row">
        <div class="col d-flex align-items-start order-1 order-md-0">
  
          <h1 class="order-1">
            Main Heading 
          </h1>
  
          <a href="#" class="btn lmp-link atp-header-back-link order-0">
            <i class="lmp-icon icon-md" aria-hidden="true">arrow_back</i>
            <span class="sr-only">Navigate to previous page</span>        
          </a>
  
        </div>
      </div>
    </div>
  </div>

View in new window

    
      <div class="atp-header">
    <div class="container">
      <div class="row">
        <div class="col d-flex align-items-start order-1 order-md-0">
  
          <h1 class="order-1">
            Main Heading 
            <span>Subheading Text</span>
          </h1>
  
          <a href="#" class="btn lmp-link atp-header-back-link order-0">
            <i class="lmp-icon icon-md" aria-hidden="true">arrow_back</i>
            <span class="sr-only">Navigate to previous page</span>        
          </a>
  
        </div>
      </div>
    </div>
  </div>

Header with CTA

Heading with Call to action button

View in new window

    
      <div class="atp-header">
    <div class="container">
      <div class="row">
        <div class="col d-flex align-items-start order-1 order-md-0">
  
          <h1 class="order-1">
            Main Heading 
            <span>Subheading Text</span>
          </h1>
  
          <a href="#" class="btn lmp-link atp-header-back-link order-0">
            <i class="lmp-icon icon-md" aria-hidden="true">arrow_back</i>
            <span class="sr-only">Navigate to previous page</span>        
          </a>
  
        </div>
        <div class="col-md-auto order-0 order-md-1 text-right mb-2 mb-md-0">
  
          <a href="#" class="btn lmp-primary">CTA Button</a>
  
        </div>
      </div>
    </div>
  </div>