SendGrid style-guide flexible header

flex-header.html

<header class="flex-header">
  <div>
    <a class="flex-header-action">
      <i class="sg-icon sg-icon-x"></i>
    </a>
    <div class="flex-header-title">
      <h3>
        Header Including Everything
        <i class="sg-icon sg-icon-info-circle"></i>
      </h3>
    </div>
    <div class="flex-header-tabs">
      <a class="flex-header-tab is-active">
        <i class="sg-icon sg-icon-mail"></i>
        Run New Test
      </a>
      <a class="flex-header-tab">
        <i class="sg-icon sg-icon-mc-preview"></i>
        View Test Results
      </a>
    </div>
    <button class="btn btn-on-dark btn-secondary has-icon">
      <i class="sg-icon sg-icon-save-draft"></i>
      Save
    </button>
  </div>
  <div class="flex-header-right">
    <div class="counter">
      Credits
      <span class="counter-bubble">
        26
      </span>
    </div>
    <div class="btn-list">
      <button class="btn btn-tertiary">
        Cancel
      </button>
      <button class="btn btn-primary">
        Update
      </button>
    </div>
  </div>
</header>