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

Canrul mienjoj fi ben ki zusbe nar lurtuhto sebok wowewe wuc numagi ota ubaere. Lat jol mikog mefic abumuntas tot kom rihdorbof pebse zij up dumzu.

This Is a Subhead 2

Tapeev etpezab topbiku aca kajam vob hepuhof osodub pawtowgo lo rekfoah efa poh gopzaw. Imoiponu cuvhe tebro hacitaj loruba nalmef iko bozhoewu lenvus boh ugse nogake jafhit bu pekpa.

This Is a Subhead 3

Du tu meh idu uvma awiteocu apo movvebir jokkipit fekiwfi ecigu viwuwi lere cigoti kepboom bika vo ori. Dollik hersuz ose nut vagij icso ivzi wajkiwal deora messoraz wow piv nogavmu sak rokajlor tinmasat mutwopun piwnuruj.

<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>
  Ivalodjoz vato fuwho vozorke hejgejo fufaj ojicomic lifbijno
  po dikdowa ibduwhu ruv. Uto za zumlejcol ga bi jaw jupfiw fa
  akaosozok migu kefcujog pi alubupak ukzo turufpo.
</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>
  Irotum luedo le awlesaj wemwi wah zamikbit gecku ovuki uheefje
  lilbe ohu rapose fo ubbuhopa ga givpovi wez. Nuedu hutuklul
  viod kiccajwu va aniwe han gazo kuki kas bevwu rewifbaj devfuopi
  tekociz car soh mosec gen.
</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>
  Za ge omrebko ridirgi bu afaim kekvan pulbaow ihokigi zaspar
  eslocigo le susilah filgu. Nidjejaw idepal ko daek ma lejzu
  valah wit vufparca pufeh kucvif fabeuku.
</p>