Hash Heading

Heading with a shortcut for a permalink. Useful for providing linkability to specific sections of blog posts.

This Is a Subhead 1

This Is a Subhead 2

This Is a Subhead 3

This Is a Subhead 4

This Is a Subhead 5
This Is a Subhead 6
<div class="HashHeading">
  <h1 id="HashHeading-demo-1">
    This Is a Subhead 1
  </h1>
  <a href="#HashHeading-demo-1" label="Permalink for This Is a Subhead 1"
   class="HashHeading-link">
    <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="Icon">
  <g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round">
    <path d="M13.77,10.09l-0.71-.71a4,4,0,0,0-5.65,0L3.16,13.63a4,4,0,0,0,0,5.66l1.4,1.4a4,4,0,0,0,5.67,0l1.41-1.41"/>
    <path d="M10.23,13.62l0.71,0.71a4,4,0,0,0,5.65,0l4.25-4.25a4,4,0,0,0,0-5.66L19.43,3a4,4,0,0,0-5.67,0L12.35,4.43"/>
  </g>
</svg>
  </a>
</div>
<div class="HashHeading">
  <h2 id="HashHeading-demo-2">
    This Is a Subhead 2
  </h2>
  <a href="#HashHeading-demo-2" label="Permalink for This Is a Subhead 2"
   class="HashHeading-link">
    <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="Icon">
  <g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round">
    <path d="M13.77,10.09l-0.71-.71a4,4,0,0,0-5.65,0L3.16,13.63a4,4,0,0,0,0,5.66l1.4,1.4a4,4,0,0,0,5.67,0l1.41-1.41"/>
    <path d="M10.23,13.62l0.71,0.71a4,4,0,0,0,5.65,0l4.25-4.25a4,4,0,0,0,0-5.66L19.43,3a4,4,0,0,0-5.67,0L12.35,4.43"/>
  </g>
</svg>
  </a>
</div>
<div class="HashHeading">
  <h3 id="HashHeading-demo-3">
    This Is a Subhead 3
  </h3>
  <a href="#HashHeading-demo-3" label="Permalink for This Is a Subhead 3"
   class="HashHeading-link">
    <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="Icon">
  <g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round">
    <path d="M13.77,10.09l-0.71-.71a4,4,0,0,0-5.65,0L3.16,13.63a4,4,0,0,0,0,5.66l1.4,1.4a4,4,0,0,0,5.67,0l1.41-1.41"/>
    <path d="M10.23,13.62l0.71,0.71a4,4,0,0,0,5.65,0l4.25-4.25a4,4,0,0,0,0-5.66L19.43,3a4,4,0,0,0-5.67,0L12.35,4.43"/>
  </g>
</svg>
  </a>
</div>
<div class="HashHeading">
  <h4 id="HashHeading-demo-4">
    This Is a Subhead 4
  </h4>
  <a href="#HashHeading-demo-4" label="Permalink for This Is a Subhead 4"
   class="HashHeading-link">
    <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="Icon">
  <g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round">
    <path d="M13.77,10.09l-0.71-.71a4,4,0,0,0-5.65,0L3.16,13.63a4,4,0,0,0,0,5.66l1.4,1.4a4,4,0,0,0,5.67,0l1.41-1.41"/>
    <path d="M10.23,13.62l0.71,0.71a4,4,0,0,0,5.65,0l4.25-4.25a4,4,0,0,0,0-5.66L19.43,3a4,4,0,0,0-5.67,0L12.35,4.43"/>
  </g>
</svg>
  </a>
</div>
<div class="HashHeading">
  <h5 id="HashHeading-demo-5">
    This Is a Subhead 5
  </h5>
  <a href="#HashHeading-demo-5" label="Permalink for This Is a Subhead 5"
   class="HashHeading-link">
    <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="Icon">
  <g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round">
    <path d="M13.77,10.09l-0.71-.71a4,4,0,0,0-5.65,0L3.16,13.63a4,4,0,0,0,0,5.66l1.4,1.4a4,4,0,0,0,5.67,0l1.41-1.41"/>
    <path d="M10.23,13.62l0.71,0.71a4,4,0,0,0,5.65,0l4.25-4.25a4,4,0,0,0,0-5.66L19.43,3a4,4,0,0,0-5.67,0L12.35,4.43"/>
  </g>
</svg>
  </a>
</div>
<div class="HashHeading">
  <h6 id="HashHeading-demo-6">
    This Is a Subhead 6
  </h6>
  <a href="#HashHeading-demo-6" label="Permalink for This Is a Subhead 6"
   class="HashHeading-link">
    <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="Icon">
  <g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round">
    <path d="M13.77,10.09l-0.71-.71a4,4,0,0,0-5.65,0L3.16,13.63a4,4,0,0,0,0,5.66l1.4,1.4a4,4,0,0,0,5.67,0l1.41-1.41"/>
    <path d="M10.23,13.62l0.71,0.71a4,4,0,0,0,5.65,0l4.25-4.25a4,4,0,0,0,0-5.66L19.43,3a4,4,0,0,0-5.67,0L12.35,4.43"/>
  </g>
</svg>
  </a>
</div>

You may optionally include heading modifiers (HashHeading--h1 through HashHeading--h6) in cases where you'd like to retain proportional font-size of the container (for example, when using a u-staggerItems* utility).

This Is a Subhead 1

Vuluk ofsabaz hezzusol etbeki ucecancos bup pucajha bafne epihbu lanuwtir irizi fudrojobo efa buhaite. Nipim efkovpa cudo hegaj pa kizvi ipedawre legponur pijib taonewi fubki ebzo noploaje simip juzsefil me jonuwema iztu.

This Is a Subhead 2

Ben iwupunew ru milak wab zomca lov etporsav cain ubikov vorizwa da. Lamtewu ofze goaszo tu azovi uwagu ifuho wu tulem gajme vatlizaj wuniero et unujotu tuuwesa janum naj.

This Is a Subhead 3

Ahaid nuol akiladek lewammu avo omu majlacso tinopuf iwivur movilago ikiko rorti. Vira vaw sebopogi ip hizucez puh diajde evorauz uzo lowlovjo id dad cu cal kib.

<div class="HashHeading HashHeading--h1">
  <h1 id="HashHeading-demo-1">
    This Is a Subhead 1
  </h1>
  <a href="#HashHeading-demo-1" label="Permalink for This Is a Subhead 1"
   class="HashHeading-link">
    <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="Icon">
  <g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round">
    <path d="M13.77,10.09l-0.71-.71a4,4,0,0,0-5.65,0L3.16,13.63a4,4,0,0,0,0,5.66l1.4,1.4a4,4,0,0,0,5.67,0l1.41-1.41"/>
    <path d="M10.23,13.62l0.71,0.71a4,4,0,0,0,5.65,0l4.25-4.25a4,4,0,0,0,0-5.66L19.43,3a4,4,0,0,0-5.67,0L12.35,4.43"/>
  </g>
</svg>
  </a>
</div>
<p>
  Fuupeah paw zi jetmaldip immasrag pojat faf vejte vol nes bemalu
  cabijpaz zinol ranun. Hipjistu ah ihu ighavwow zuv innem ocaem
  fihjaj nivazgew duw uwbot osehe teg.
</p>
<div class="HashHeading HashHeading--h2">
  <h2 id="HashHeading-demo-2">
    This Is a Subhead 2
  </h2>
  <a href="#HashHeading-demo-2" label="Permalink for This Is a Subhead 2"
   class="HashHeading-link">
    <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="Icon">
  <g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round">
    <path d="M13.77,10.09l-0.71-.71a4,4,0,0,0-5.65,0L3.16,13.63a4,4,0,0,0,0,5.66l1.4,1.4a4,4,0,0,0,5.67,0l1.41-1.41"/>
    <path d="M10.23,13.62l0.71,0.71a4,4,0,0,0,5.65,0l4.25-4.25a4,4,0,0,0,0-5.66L19.43,3a4,4,0,0,0-5.67,0L12.35,4.43"/>
  </g>
</svg>
  </a>
</div>
<p>
  Ru bupaphi kuku aceuvo nughu namtukuh wisetic rohkaj wuaz ja
  la iseegu non alnop azcob vebni. Jeana menawdin dufupvu dazew
  rewivogaz wepmouz vifikuw taguge bojan utu zowi adtulul.
</p>
<div class="HashHeading HashHeading--h3">
  <h3 id="HashHeading-demo-3">
    This Is a Subhead 3
  </h3>
  <a href="#HashHeading-demo-3" label="Permalink for This Is a Subhead 3"
   class="HashHeading-link">
    <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="Icon">
  <g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round">
    <path d="M13.77,10.09l-0.71-.71a4,4,0,0,0-5.65,0L3.16,13.63a4,4,0,0,0,0,5.66l1.4,1.4a4,4,0,0,0,5.67,0l1.41-1.41"/>
    <path d="M10.23,13.62l0.71,0.71a4,4,0,0,0,5.65,0l4.25-4.25a4,4,0,0,0,0-5.66L19.43,3a4,4,0,0,0-5.67,0L12.35,4.43"/>
  </g>
</svg>
  </a>
</div>
<p>
  Dosusefu fook zi bit hopupiv visdicar niiwoh rut omuan zulubig
  dedte leros cukajo gadsiefi zureper. Id hiro su zo enacu to
  kesliwwez eczo etzi so jilje nab pe tugwo sug.
</p>