## Divided heading

Use a divided heading to call special attention to a separation of content in your pages.

{% example html %}
<div class="hr-divider">
  <h3 class="hr-divider-content hr-divider-heading">
    Divider heading
  </h3>
</div>
{% endexample %}

You can also use it with pill navigation:

{% example html %}
<div class="hr-divider">
  <ul class="nav nav-pills hr-divider-content hr-divider-nav">
    <li class="active">
      <a href="#">Active tab</a>
    </li>
    <li>
      <a href="#">Tab</a>
    </li>
    <li>
      <a href="#">Tab</a>
    </li>
  </ul>
</div>
{% endexample %}