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
52

<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
19

   
<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
10
11

<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

<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>

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

<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
15
16
17
18
19
20

<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>