Headings

Demo styling
<div class="margin-bottom-md">
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>
</div>

<div class="margin-bottom-md">
    <h1 class="heading-size--h1">.heading-size--h1</h1>
    <h2 class="heading-size--h2">.heading-size--h2</h2>
    <h3 class="heading-size--h3">.heading-size--h3</h3>
    <h4 class="heading-size--h4">.heading-size--h4</h4>
    <h5 class="heading-size--h5">.heading-size--h5</h5>
    <h6 class="heading-size--h6">.heading-size--h6</h6>
</div>

<div class="margin-bottom-md">
    <h1>First level heading</h1>
    <p>paragraph text</p>
    <h2>Second level heading</h2>
    <p>paragraph text</p>
    <h3>Third level heading</h3>
    <p>paragraph text</p>
    <h4>Fourth level heading</h4>
    <p>paragraph text</p>
    <h5>Fifth level heading</h5>
    <p>paragraph text</p>
    <h6>Sixth level heading</h6>
    <p>paragraph text</p>
</div>
<div class="margin-bottom-md">
	{{#each tags}}
		<{{tag}}>{{tag}}</{{tag}}>
	{{/each}}
</div>

<div class="margin-bottom-md">
	{{#each tags}}
		<{{tag}} class="{{@root.classPrefix}}{{tag}}">.{{@root.classPrefix}}{{tag}}</{{tag}}>
	{{/each}}
</div>

<div class="margin-bottom-md">
	{{#each tags}}
		<{{tag}}>{{title}} level heading</{{tag}}>
		<p>{{@root.paragraph}}</p>
	{{/each}}
</div>
{
  "classPrefix": "heading-size--",
  "paragraph": "paragraph text",
  "tags": [
    {
      "tag": "h1",
      "title": "First"
    },
    {
      "tag": "h2",
      "title": "Second"
    },
    {
      "tag": "h3",
      "title": "Third"
    },
    {
      "tag": "h4",
      "title": "Fourth"
    },
    {
      "tag": "h5",
      "title": "Fifth"
    },
    {
      "tag": "h6",
      "title": "Sixth"
    }
  ]
}

No notes defined.