• مثال ها / Shortcodes 4 / Headings

Headings

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

HTML Shortcode 

 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
53
54
55
56
57
58
 
<div class="row">
    <div class="col-md-3">
        <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>
    </div>
    <div class="col-md-3">
        <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>
    <div class="col-md-3">
        <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>
    <div class="col-md-3">
        <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>
    </div>
</div>

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

HTML Shortcode 

 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>

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

HTML Shortcode 

 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>

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

HTML Shortcode 

 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>

Heading H2

Heading H2

Heading H2

HTML Shortcode 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
 
<div class="row">
    <div class="col-md-12">
        <div class="heading heading-border heading-middle-border heading-middle-border-center">
            <h2>Heading <strong>H2</strong></h2>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="heading heading-border heading-middle-border heading-middle-border-center heading-border-lg">
            <h2>Heading <strong>H2</strong></h2>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="heading heading-border heading-middle-border heading-middle-border-center heading-border-xl">
            <h2>Heading <strong>H2</strong></h2>
        </div>
    </div>
</div>

H1

H2

H3

H4

H5
H6

H1

H2

H3

H4

H5
H6

H1

H2

H3

H4

H5
H6

H1

H2

H3

H4

H5
H6

H1

H2

H3

H4

H5
H6

H1

H2

H3

H4

H5
H6

HTML Shortcode 

 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
 
<div class="row center">
    <div class="col-md-2">
        <h1>H1</h1>
        <h2>H2</h2>
        <h3>H3</h3>
        <h4>H4</h4>
        <h5>H5</h5>
        <h6>H6</h6>
    </div>
    <div class="col-md-2">
        <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>
    </div>
    <div class="col-md-2">
        <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>
    </div>
    <div class="col-md-2">
        <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>
    </div>
    <div class="col-md-2">
        <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>
    </div>
    <div class="col-md-2">
        <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>
    </div>
</div>

Heading H1

Heading H1

Heading H1

Heading H1

Heading H1

Heading H1

Heading H1

Heading H1

HTML Shortcode 

 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
 
<div class="row">
    <div class="col-md-3">
        <div class="heading heading-primary heading-border heading-bottom-border">
            <h1>Heading <strong>H1</strong></h1>
        </div>
    </div>
    <div class="col-md-3">
        <div class="heading heading-secondary heading-border heading-bottom-border">
            <h1>Heading <strong>H1</strong></h1>
        </div>
    </div>
    <div class="col-md-3">
        <div class="heading heading-tertiary heading-border heading-bottom-border">
            <h1>Heading <strong>H1</strong></h1>
        </div>
    </div>
    <div class="col-md-3">
        <div class="heading heading-quaternary heading-border heading-bottom-border">
            <h1>Heading <strong>H1</strong></h1>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-3">
        <div class="heading heading-primary heading-border heading-bottom-border">
            <h1 class="heading-primary">Heading <strong>H1</strong></h1>
        </div>
    </div>
    <div class="col-md-3">
        <div class="heading heading-secondary heading-border heading-bottom-border">
            <h1 class="heading-secondary">Heading <strong>H1</strong></h1>
        </div>
    </div>
    <div class="col-md-3">
        <div class="heading heading-tertiary heading-border heading-bottom-border">
            <h1 class="heading-tertiary">Heading <strong>H1</strong></h1>
        </div>
    </div>
    <div class="col-md-3">
        <div class="heading heading-quaternary heading-border heading-bottom-border">
            <h1 class="heading-quaternary">Heading <strong>H1</strong></h1>
        </div>
    </div>
</div>

Heading with Highlight Colors.

Heading with Highlight Colors.

Heading with Highlight Colors.

Heading with Highlight Colors.

Multiple Colors in the Same Heading

HTML Shortcode 

 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
 
<div class="row">
    <div class="col-md-12">
        <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>
</div>
<div class="row">
    <div class="col-md-12">
        <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>
</div>
<div class="row">
    <div class="col-md-12">
        <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>
</div>
<div class="row">
    <div class="col-md-12">
        <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>
</div>
<div class="row">
    <div class="col-md-12">
        <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>
    </div>
</div>

Heading H1

Sub-title pellentesque pellentesque tempor tellus eget fermentum. usce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada.

Heading H2

Sub-title pellentesque pellentesque tempor tellus eget fermentum. usce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada.

Heading H3

Sub-title pellentesque pellentesque tempor tellus eget fermentum. usce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada.

Heading H4

Sub-title pellentesque pellentesque tempor tellus eget fermentum. usce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada.

Heading H5

Sub-title pellentesque pellentesque tempor tellus eget fermentum. usce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada.

HTML Shortcode 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
 
<div class="row">
    <div class="col-md-12">
        <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>
    </div>
</div>