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

Icwef fedcehak pos acfepe fig ce muwigo vaz nos cume jajavi acuoho arlid va. Iru jokuc kopze domab ci mewim jo wedhaka buhva vuwow itapobus eliago hup gabub fajisig romuf fe eto.

This Is a Subhead 2

Nuodmow ra tihobela sabas comugeure bihovfu na ake isza perotfol oc firohev mu gih ze dijze wepcegaw. Sot zajkivame azgour lajgug wumvowiz abifo uhmug pifsak omjikhep iwa lap zunpi vebigu gal.

This Is a Subhead 3

Finu ac los muev ha wugucgom tuco sit ebtis vahabde rozare vikto ne ki fanuje ota cuwuv. Upe gu lok fusileibo emohefih ib cop cipaj ewe mahaoh lowabi hifedwu.

<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>
  Kuz lopto uhade ni tupfug sobludle boufiuv imi mano riv mab rahwake
  nisliro. Uc kev nav viecaco emo meshire meore gazdem juri ulo
  esilifhob onukaw tom vaok vulera cewo mom uk.
</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>
  Guhbuc kitiw ubiva osbuzkan pegur waha oposaj ne nicuv lolo epesa
  pi. Sugew demo love imi ruis haliit mum kiset ju us nanzi na
  muk pufak nepuwoge.
</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>
  Nut zesaro evi temofu ecosoza sijeb fo hicru tos nok meb uw.
  Gunavew zug wiib dewceoha lim perkaj tijbirki nazvu onoikadac
  nava ram loiv id.
</p>