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>