JavaScript subheader

What’s the right markup to create a sub-header?

I understand

  <ion-header-bar class="bar-positive">
    <h1 class="title">Ionic Blank Starter</h1>
  </ion-header-bar>

  <ion-header-bar class="bar-calm subheader-bar">
    <h2 class="title">Sub header</h2>
  </ion-header-bar>

This doesn’t work. What happens is the subheader bar will cover over the header bar instead. Is there an ion-subheader-bar element tag instead? However, if I set to ion-subheader-bar, the subheader disappears and the header bar takes over.

I know if I use the CSS component style based on div, it looks like this:

<div class="bar bar-header bar-positive"> 
   <h1 class="title">Header Buttons</h1>
</div>

<div class="bar bar-subheader bar-assertive">
   <h2 class="title">Sub Header</h2>
</div>

Have you added add subheader attribute to your content

<ion-content class="has-header has-subheader">
</ion-content>