<div class="heading">
    <h1>No badge</h1>
</div>

<div class="badge-heading">
    <h1>Blue badge heading (default)</h1>
</div>

<div class="badge-heading badge-red">
    <h1>Red badge heading</h1>
    <h2>with a sub-heading</h2>
</div>

<div class="badge-heading badge-orange">
    <h1>Orange badge heading</h1>
</div>

<div class="badge-heading badge-teal">
    <h1>Teal badge heading</h1>
</div>

<div class="badge-heading badge-purple">
    <h1>Purple badge heading which has lots of text in it so will wrap</h1>
</div>

<div class="badge-heading badge-gray">
    <h1>Gray badge heading</h1>
</div>
<div class="heading">
    <h2>No badge</h2>
</div>

<div class="badge-heading">
    <h2>Blue badge heading (default)</h2>
</div>

<div class="badge-heading badge-red">
    <h2>Red badge heading</h2>
    <h3>with a sub-heading</h3>
</div>

<div class="badge-heading badge-orange">
    <h2>Orange badge heading</h2>
</div>

<div class="badge-heading badge-teal">
    <h2>Teal badge heading</h2>
</div>

<div class="badge-heading badge-purple">
    <h2>Purple badge heading which has lots of text in it so will wrap</h2>
</div>

<div class="badge-heading badge-gray">
    <h2>Gray badge heading</h2>
</div>
Update heading levels in badge pattern documentation
Update heading levels in badge pattern documentation
