1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<h1>Heading <strong>H1</strong></h1>
<h2>Heading <strong>H2</strong></h2>
<h3>Heading <strong>H3</strong></h3>
<h4>Heading <strong>H4</strong></h4>
<h5>Heading <strong>H5</strong></h5>
<h6>Heading <strong>H6</strong></h6>

<h1 class="text-uppercase">Heading <strong>H1</strong></h1>
<h2 class="text-uppercase">Heading <strong>H2</strong></h2>
<h3 class="text-uppercase">Heading <strong>H3</strong></h3>
<h4 class="text-uppercase">Heading <strong>H4</strong></h4>
<h5 class="text-uppercase">Heading <strong>H5</strong></h5>
<h6 class="text-uppercase">Heading <strong>H6</strong></h6>

<div class="heading heading-border heading-bottom-border">
	<h1>Heading <strong>H1</strong></h1>
</div>
<div class="heading heading-border heading-bottom-border">
	<h2>Heading <strong>H2</strong></h2>
</div>
<div class="heading heading-border heading-bottom-border">
	<h3>Heading <strong>H3</strong></h3>
</div>
<div class="heading heading-border heading-bottom-border">
	<h4>Heading <strong>H4</strong></h4>
</div>
<div class="heading heading-border heading-bottom-border">
	<h5>Heading <strong>H5</strong></h5>
</div>
<div class="heading heading-border heading-bottom-border">
	<h6>Heading <strong>H6</strong></h6>
</div>

<div class="heading heading-border heading-bottom-double-border">
	<h1>Heading <strong>H1</strong></h1>
</div>
<div class="heading heading-border heading-bottom-double-border">
	<h2>Heading <strong>H2</strong></h2>
</div>
<div class="heading heading-border heading-bottom-double-border">
	<h3>Heading <strong>H3</strong></h3>
</div>
<div class="heading heading-border heading-bottom-double-border">
	<h4>Heading <strong>H4</strong></h4>
</div>
<div class="heading heading-border heading-bottom-double-border">
	<h5>Heading <strong>H5</strong></h5>
</div>
<div class="heading heading-border heading-bottom-double-border">
	<h6>Heading <strong>H6</strong></h6>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<div class="heading heading-border heading-middle-border">
	<h1>Heading <strong>H1</strong></h1>
</div>
<div class="heading heading-border heading-middle-border">
	<h2>Heading <strong>H2</strong></h2>
</div>
<div class="heading heading-border heading-middle-border">
	<h3>Heading <strong>H3</strong></h3>
</div>
<div class="heading heading-border heading-middle-border">
	<h4>Heading <strong>H4</strong></h4>
</div>
<div class="heading heading-border heading-middle-border">
	<h5>Heading <strong>H5</strong></h5>
</div>
<div class="heading heading-border heading-middle-border">
	<h6>Heading <strong>H6</strong></h6>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<div class="heading heading-border heading-middle-border heading-middle-border-reverse">
	<h1>Heading <strong>H1</strong></h1>
</div>
<div class="heading heading-border heading-middle-border heading-middle-border-reverse">
	<h2>Heading <strong>H2</strong></h2>
</div>
<div class="heading heading-border heading-middle-border heading-middle-border-reverse">
	<h3>Heading <strong>H3</strong></h3>
</div>
<div class="heading heading-border heading-middle-border heading-middle-border-reverse">
	<h4>Heading <strong>H4</strong></h4>
</div>
<div class="heading heading-border heading-middle-border heading-middle-border-reverse">
	<h5>Heading <strong>H5</strong></h5>
</div>
<div class="heading heading-border heading-middle-border heading-middle-border-reverse">
	<h6>Heading <strong>H6</strong></h6>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<div class="heading heading-border heading-middle-border heading-middle-border-center">
	<h1>Heading <strong>H1</strong></h1>
</div>
<div class="heading heading-border heading-middle-border heading-middle-border-center">
	<h2>Heading <strong>H2</strong></h2>
</div>
<div class="heading heading-border heading-middle-border heading-middle-border-center">
	<h3>Heading <strong>H3</strong></h3>
</div>
<div class="heading heading-border heading-middle-border heading-middle-border-center">
	<h4>Heading <strong>H4</strong></h4>
</div>
<div class="heading heading-border heading-middle-border heading-middle-border-center">
	<h5>Heading <strong>H5</strong></h5>
</div>
<div class="heading heading-border heading-middle-border heading-middle-border-center">
	<h6>Heading <strong>H6</strong></h6>
</div>

1
2
3
4
5
6
7
8
9

<div class="heading heading-border heading-middle-border heading-middle-border-center">
	<h2>Heading <strong>H2</strong></h2>
</div>
<div class="heading heading-border heading-middle-border heading-middle-border-center heading-border-lg">
	<h2>Heading <strong>H2</strong></h2>
</div>
<div class="heading heading-border heading-middle-border heading-middle-border-center heading-border-xl">
	<h2>Heading <strong>H2</strong></h2>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

<h1 class="heading-primary">H1</h1>
<h2 class="heading-primary">H2</h2>
<h3 class="heading-primary">H3</h3>
<h4 class="heading-primary">H4</h4>
<h5 class="heading-primary">H5</h5>
<h6 class="heading-primary">H6</h6>

<h1 class="heading-secondary">H1</h1>
<h2 class="heading-secondary">H2</h2>
<h3 class="heading-secondary">H3</h3>
<h4 class="heading-secondary">H4</h4>
<h5 class="heading-secondary">H5</h5>
<h6 class="heading-secondary">H6</h6>

<h1 class="heading-tertiary">H1</h1>
<h2 class="heading-tertiary">H2</h2>
<h3 class="heading-tertiary">H3</h3>
<h4 class="heading-tertiary">H4</h4>
<h5 class="heading-tertiary">H5</h5>
<h6 class="heading-tertiary">H6</h6>

<h1 class="heading-quaternary">H1</h1>
<h2 class="heading-quaternary">H2</h2>
<h3 class="heading-quaternary">H3</h3>
<h4 class="heading-quaternary">H4</h4>
<h5 class="heading-quaternary">H5</h5>
<h6 class="heading-quaternary">H6</h6>

<h1 class="heading-light">H1</h1>
<h2 class="heading-light">H2</h2>
<h3 class="heading-light">H3</h3>
<h4 class="heading-light">H4</h4>
<h5 class="heading-light">H5</h5>
<h6 class="heading-light">H6</h6>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<div class="heading heading-primary heading-border heading-bottom-border">
	<h1>Heading <strong>H1</strong></h1>
</div>

<div class="heading heading-secondary heading-border heading-bottom-border">
	<h1>Heading <strong>H1</strong></h1>
</div>

<div class="heading heading-tertiary heading-border heading-bottom-border">
	<h1>Heading <strong>H1</strong></h1>
</div>

<div class="heading heading-quaternary heading-border heading-bottom-border">
	<h1>Heading <strong>H1</strong></h1>
</div>

<div class="heading heading-primary heading-border heading-bottom-border">
	<h1 class="heading-primary">Heading <strong>H1</strong></h1>
</div>

<div class="heading heading-secondary heading-border heading-bottom-border">
	<h1 class="heading-secondary">Heading <strong>H1</strong></h1>
</div>

<div class="heading heading-tertiary heading-border heading-bottom-border">
	<h1 class="heading-tertiary">Heading <strong>H1</strong></h1>
</div>

<div class="heading heading-quaternary heading-border heading-bottom-border">
	<h1 class="heading-quaternary">Heading <strong>H1</strong></h1>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<div class="heading heading-border heading-middle-border heading-middle-border-center center">
	<h2>Heading with <span class="inverted">Highlight</span> Colors.</h2>
</div>
<div class="heading heading-border heading-middle-border heading-middle-border-center center">
	<h2>Heading with <span class="inverted inverted-secondary">Highlight</span> Colors.</h2>
</div>
<div class="heading heading-border heading-middle-border heading-middle-border-center center">
	<h2>Heading with <span class="inverted inverted-tertiary">Highlight</span> Colors.</h2>
</div>
<div class="heading heading-border heading-middle-border heading-middle-border-center center">
	<h2>Heading with <span class="inverted inverted-quaternary">Highlight</span> Colors.</h2>
</div>
<div class="heading heading-border heading-middle-border heading-middle-border-center center">
	<h2><span class="text-color-primary">Multiple</span> <span class="text-color-secondary">Colors</span> in the <span class="text-color-tertiary">Same</span> <span class="text-color-quaternary">Heading</span></h2>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<h1 class="mb-none">Heading <strong>H1</strong></h1>
<p class="mb-xlg">Sub-title pellentesque pellentesque tempor tellus eget fermentum. usce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada.</p>

<h2 class="mb-none">Heading <strong>H2</strong></h2>
<p class="mb-xlg">Sub-title pellentesque pellentesque tempor tellus eget fermentum. usce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada.</p>

<h3 class="mb-none">Heading <strong>H3</strong></h3>
<p class="mb-xlg">Sub-title pellentesque pellentesque tempor tellus eget fermentum. usce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada.</p>

<h4 class="mb-none">Heading <strong>H4</strong></h4>
<p class="mb-xlg">Sub-title pellentesque pellentesque tempor tellus eget fermentum. usce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada.</p>

<h5 class="mb-none">Heading <strong>H5</strong></h5>
<p class="mb-xlg">Sub-title pellentesque pellentesque tempor tellus eget fermentum. usce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada.</p>