{{#markdown}}
All HTML headings from **h1** to **h6** are available, and there is a special case for the page header with an optional subheading.<br />
A set of alternate headings with borders is also available.

Using the **.h1**, **.h2**, **.h3**, **.h4**, **.h5**, **.h6** classes activates an alternative typography.
{{/markdown}}

<div class="main-headings">

  <h3 class="h3">Default</h3>

    <div class="gr mbs">
      <div class="gu gu-1of3 gu-m-1of2">
{{#markdown}}
```html
<h1>
```
{{/markdown}}
      </div>
      <div class="gu-last">
          <h1>A smart</h1>
      </div>
    </div>
    <div class="gr mbs">
      <div class="gu gu-1of3 gu-m-1of2">
{{#markdown}}
```html
<h2>
```
{{/markdown}}
      </div>
      <div class="gu-last">
          <h2>easy-to-use</h2>
      </div>
    </div>
    <div class="gr mbs">
      <div class="gu gu-1of3 gu-m-1of2">
{{#markdown}}
```html
<h3>
```
{{/markdown}}
      </div>
      <div class="gu-last">
          <h3>toolkit</h3>
      </div>
    </div>
    <div class="gr mbs">
      <div class="gu gu-1of3 gu-m-1of2">
{{#markdown}}
```html
<h4>
```
{{/markdown}}
      </div>
      <div class="gu-last">
          <h4>for creating</h4>
      </div>
    </div>
    <div class="gr mbs">
      <div class="gu gu-1of3 gu-m-1of2">
{{#markdown}}
```html
<h5>
```
{{/markdown}}
      </div>
      <div class="gu-last">
          <h5>rich interfaces</h5>
      </div>
    </div>
    <div class="gr">
      <div class="gu gu-1of3 gu-m-1of2">
{{#markdown}}
```html
<h6>
```
{{/markdown}}
      </div>
      <div class="gu-last">
          <h6>in lightning speed!</h6>
      </div>
    </div>

    <div class="gr">
      <div class="gu gu-1of3 gu-m-1of2">
{{#markdown}}
```html
<h2 class="h-sub">
```
{{/markdown}}
      </div>
      <div class="gu-last">
          <h2 class="h-sub">in lightning speed!</h6>
      </div>
    </div>

  <h3 class="h3">Alternative</h3>

<div class="gr mbs">
  <div class="gu gu-1of3 gu-m-1of2">
{{#markdown}}
```html
<h1 class="h-lead">
```
{{/markdown}}
  </div>
  <div class="gu-last">
      <h1 class="h-lead">A smart</h1>
  </div>
</div>


<div class="gr mbs">
  <div class="gu gu-1of3 gu-m-1of2">
{{#markdown}}
```html
<h1 class="h1">
```
{{/markdown}}
  </div>
  <div class="gu-last">
      <h1 class="h1">A smart</h1>
  </div>
</div>

<div class="gr mbs">
  <div class="gu gu-1of3 gu-m-1of2">
{{#markdown}}
```html
<h2 class="h2">
```
{{/markdown}}
  </div>
  <div class="gu-last">
      <h2 class="h2">easy-to-use</h2>
  </div>
</div>
<div class="gr mbs">
  <div class="gu gu-1of3 gu-m-1of2">
{{#markdown}}
```html
<h3 class="h3">
```
{{/markdown}}
  </div>
  <div class="gu-last">
      <h3 class="h3">toolkit</h3>
  </div>
</div>
<div class="gr mbs">
  <div class="gu gu-1of3 gu-m-1of2">
{{#markdown}}
```html
<h4 class="h4">
```
{{/markdown}}
  </div>
  <div class="gu-last">
      <h4 class="h4">for creating</h4>
  </div>
</div>
<div class="gr mbs">
  <div class="gu gu-1of3 gu-m-1of2">
{{#markdown}}
```html
<h5 class="h5">
```
{{/markdown}}
  </div>
  <div class="gu-last">
      <h5 class="h5">rich interfaces</h5>
  </div>
</div>
<div class="gr">
  <div class="gu gu-1of3 gu-m-1of2">
{{#markdown}}
```html
<h6 class="h6">
```
{{/markdown}}
  </div>
  <div class="gu-last">
      <h6 class="h6">in lightning speed!</h6>
  </div>
</div>

</div>



<h3 class="h3">Page Heading</h3>
<div class="bx mbn">
  <div class="page-header mbn">
    <h1>Lorem ipsum <span class="sub">dolor sit amet</span></h1>
  </div>
</div>

<div class="code-content">
{{> toggle-code}}
{{#markdown}}
```html
<h1>Lorem ipsum <span class="sub">dolor sit amet</span></h1>
```
{{/markdown}}
{{> copy-code}}
</div>


<h3 class="h3">Subheading Divider</h3>
<div class="bx mbn">
  <h3 class="subh-divider mbn">Sodales at enim</h3>
</div>

<div class="code-content">
{{> toggle-code}}
{{#markdown}}
```html
<h3 class="subh-divider mbl">Sodales at enim</h3>
```
{{/markdown}}
{{> copy-code}}
</div>
