Web Docs

Headings 

<!-- Pagetitle -->
<h1 class="pagetitle">Page Title</h1>


<!-- Heading 1 -->
<h1 id="heading-1">Heading 1</h1>


<!-- Heading 2 -->
<h2 id="heading-2">Heading 2</h2>


<!-- Heading 3 -->
<h3 id="heading-3">Heading 3</h3>


<!-- Heading 4 -->
<h4>Heading 4</h4>


<!-- Heading 5 -->
<h5>Heading 5</h5>


<!-- Heading 6 -->
<h6>Heading 6</h6>


<!-- Pagetitle -->
<h1 class="pagetitle">{{ heading }}</h1>

<!-- Heading 1 -->
<h1 id="{{ cssSafe heading }}">{{ heading }}</h1>

<!-- Heading 2 -->
<h2 id="{{ cssSafe heading }}">{{ heading }}</h2>

<!-- Heading 3 -->
<h3 id="{{ cssSafe heading }}">{{ heading }}</h3>

<!-- Heading 4 -->
<h4>{{ heading }}</h4>

<!-- Heading 5 -->
<h5>{{ heading }}</h5>

<!-- Heading 6 -->
<h6>{{ heading }}</h6>
  • Content: 
    
h1, h2, h3, h4, h5, h6
	color: $byuNavy
	line-height: 1.3


h1
	font-weight: 700
	font-size: $fontSize48
	margin: $spacing4 0
	line-height: 1.2


	&.pagetitle
		font-weight: 500
		font-size: $fontSize64
		letter-spacing: -0.025em
		line-height: 1.15625


h2
	font-size: $fontSize36
	font-weight: 500
	margin: $spacing4 0 $spacing3


h3
	font-size: $fontSize24
	font-weight: 700
	margin: $spacing3 0

h4
	font-size: $fontSize20
	margin: $spacing3 0
	text-transform: uppercase

h5, h6
	font-size: $fontSize18
	margin: $spacing3 0

h5
	font-weight: 500

h6
	font-weight: 300
	font-style: italic
  • URL: /components/raw/heading/heading.sass
  • Filesystem Path: src/components/0-foundation/heading/heading.sass
  • Size: 593 Bytes 
/* Pagetitle */
{
  "heading": "Page Title"
}


/* Heading 1 */
{
  "heading": "Heading 1"
}


/* Heading 2 */
{
  "heading": "Heading 2"
}


/* Heading 3 */
{
  "heading": "Heading 3"
}


/* Heading 4 */
{
  "heading": "Heading 4"
}


/* Heading 5 */
{
  "heading": "Heading 5"
}


/* Heading 6 */
{
  "heading": "Heading 6"
}