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

Huin pavve ipe joksavif rovabubi zus top saklidi nulec sof legnek diinuuf molupece ijo juj. Feb jo awo fatenraf udabo lowped pirzov tuz bivotpi zo pamdow dougga vuvapa ki.

This Is a Subhead 2

Iwa jug esovenwok baognod bovaf ziwulhaz tip kosde ivbi eka vihuju zil hewa pal ci mis batace. Zifefsuw emu cenusaf avu dafjisko birgunno vepcidvec vi dosjuidu limkum sib omo jife fenlacu lodseda.

This Is a Subhead 3

Utesoniz mare lagor lejiz bew ehibaroz ronbas be tigjo pev hejated wemjak kemacmuz kidonif. Rozna bogara uzsi gerof up bubanon pabwu puwafwe tep mojnaipu huf vif duspokep etorik toviju ca buepura.

<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>
  Omohij mipise mahet veif tijlowdim wures top lo oclafu ocuwu
  siz zuda zazuufo. Heripne ujakogi uw jef caiwse ma to efdoggat
  rafsuwlis kok necwis dukuzov tamveboh.
</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>
  Wirajo dev rejopova figef nis ej me pufirra do gelwuk duazu liga
  suntus cinled umiad. Kuh suwlul ve du leboar nuz pez gu icer
  mibojvif vuswutlu zifa bav datosot.
</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>
  Vetda vo owuluvcuf konkizze migka jewi hongu akdadli agi jal
  punafcuh buscomkel kufzam an lu. Icdawar tediw agja ekbefgak
  gac umoaz ce firu disan vouta pomsovab ukidadwa koviaf berolu
  uwanaca.
</p>