Text Hierarchies 

<!-- Heading 1 -->
<div class="pl-heading01 spacer-s">Heading 1</div>


<!-- Heading 2 -->
<div class="pl-heading02 spacer-s">Heading 2</div>


<!-- Heading 3 -->
<div class="pl-heading03 spacer-s">Heading 3</div>


<!-- Heading 4 -->
<div class="pl-heading04 spacer-s">Heading 4</div>


<!-- Lead -->
<div class="pl-lead spacer-s">Lead - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque blandit justo est, et lobortis ipsum cursus fermentum. Suspendisse tincidunt orci maximus porttitor accumsan. </div>


<!-- Numbers -->
<div class="pl-numbers spacer-s">Numbers - 1 2 3 4 5 6 7 8 9</div>


<!-- Body -->
<div class="pl-body spacer-s">Body - Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href='#'>This is a link</a></div>


<!-- Small -->
<div class="pl-small spacer-s">Small - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque blandit justo est, et lobortis ipsum cursus fermentum. Suspendisse tincidunt orci maximus porttitor accumsan.</div>


<!-- Fine Prints -->
<div class="pl-fine-prints spacer-s">Fine prints - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque blandit justo est, et lobortis ipsum cursus fermentum. Suspendisse tincidunt orci maximus porttitor accumsan.</div>


<div class="{{class}} spacer-s">{{{text}}}</div>
 
/* Heading 1 */
{
  "theme": "default",
  "firstInstance": true,
  "class": "pl-heading01",
  "text": "Heading 1"
}


/* Heading 2 */
{
  "theme": "default",
  "firstInstance": true,
  "class": "pl-heading02",
  "text": "Heading 2"
}


/* Heading 3 */
{
  "theme": "default",
  "firstInstance": true,
  "class": "pl-heading03",
  "text": "Heading 3"
}


/* Heading 4 */
{
  "theme": "default",
  "firstInstance": true,
  "class": "pl-heading04",
  "text": "Heading 4"
}


/* Lead */
{
  "theme": "default",
  "firstInstance": true,
  "class": "pl-lead",
  "text": "Lead - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque blandit justo est, et lobortis ipsum cursus fermentum. Suspendisse tincidunt orci maximus porttitor accumsan. "
}


/* Numbers */
{
  "theme": "default",
  "firstInstance": true,
  "class": "pl-numbers",
  "text": "Numbers - 1 2 3 4 5 6 7 8 9"
}


/* Body */
{
  "theme": "default",
  "firstInstance": true,
  "class": "pl-body",
  "text": "Body - Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href='#'>This is a link</a>"
}


/* Small */
{
  "theme": "default",
  "firstInstance": true,
  "class": "pl-small",
  "text": "Small - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque blandit justo est, et lobortis ipsum cursus fermentum. Suspendisse tincidunt orci maximus porttitor accumsan."
}


/* Fine Prints */
{
  "theme": "default",
  "firstInstance": true,
  "class": "pl-fine-prints",
  "text": "Fine prints - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque blandit justo est, et lobortis ipsum cursus fermentum. Suspendisse tincidunt orci maximus porttitor accumsan."
}

No notes defined.