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

Dividers

Dividers Shortcodes

Sometimes you need to separate the content visually, here are the options:

Default

HTML Shortcode 

1
 
<hr />

Spacements

HTML Shortcode 

1
2
3
 
<hr class="short" />
<hr class="tall" />
<hr class="taller" />

Styles

HTML Shortcode 

1
2
3
4
 
<hr class="solid tall" />
<hr class="dashed tall" />
<hr class="pattern tall" />
<hr class="pattern pattern-2 tall" />

Icons

HTML Shortcode 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
 
<div class="divider">
    <em class="fa fa-chevron-down"></em>
</div>
<div class="divider">
    <em class="fa fa-star"></em>
</div>
<div class="divider">
    <em class="fa fa-bolt"></em>
</div>
<div class="divider divider-solid">
    <em class="fa fa-chevron-down"></em>
</div>

Colors

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
59
60
61
62
63
 
<div class="divider">
    <em class="fa fa-chevron-down"></em>
</div>
<div class="divider divider-primary">
    <em class="fa fa-chevron-down"></em>
</div>
<div class="divider divider-secondary">
    <em class="fa fa-chevron-down"></em>
</div>
<div class="divider divider-tertiary">
    <em class="fa fa-chevron-down"></em>
</div>
<div class="divider divider-quaternary">
    <em class="fa fa-chevron-down"></em>
</div>
<hr class="invisible" />
<div class="divider divider-style-2 taller">
    <em class="fa fa-chevron-down"></em>
</div>
<div class="divider divider-style-2 divider-primary taller">
    <em class="fa fa-chevron-down"></em>
</div>
<div class="divider divider-style-2 divider-secondary taller">
    <em class="fa fa-chevron-down"></em>
</div>
<div class="divider divider-style-2 divider-tertiary taller">
    <em class="fa fa-chevron-down"></em>
</div>
<div class="divider divider-style-2 divider-quaternary taller">
    <em class="fa fa-chevron-down"></em>
</div>
<hr class="invisible" />
<div class="divider divider-style-3 divider-primary taller">
    <em class="fa fa-chevron-down"></em>
</div>
<div class="divider divider-style-3 divider-secondary taller">
    <em class="fa fa-chevron-down"></em>
</div>
<div class="divider divider-style-3 divider-tertiary taller">
    <em class="fa fa-chevron-down"></em>
</div>
<div class="divider divider-style-3 divider-quaternary taller">
    <em class="fa fa-chevron-down"></em>
</div>
<hr class="invisible" />
<div class="divider divider-style-4 taller">
    <em class="fa fa-chevron-down"></em>
</div>
<div class="divider divider-style-4 divider-primary taller">
    <em class="fa fa-chevron-down"></em>
</div>
<div class="divider divider-style-4 divider-secondary taller">
    <em class="fa fa-chevron-down"></em>
</div>
<div class="divider divider-style-4 divider-tertiary taller">
    <em class="fa fa-chevron-down"></em>
</div>
<div class="divider divider-style-4 divider-quaternary taller">
    <em class="fa fa-chevron-down"></em>
</div>
<div class="divider pattern divider-style-4 divider-quaternary taller">
    <em class="fa fa-chevron-down"></em>
</div>

Full Width

HTML Shortcode 

1
2
3
 
<div class="divider divider-solid divider-style-4 taller">
<em class="fa fa-chevron-down"></em>
</div>

Icon Sizes

HTML Shortcode 

1
2
3
4
5
6
7
8
9
 
<div class="divider divider-style-4 divider-icon-sm taller">
    <em class="fa fa-chevron-down"></em>
</div>
<div class="divider divider-style-4 taller">
    <em class="fa fa-chevron-down"></em>
</div>
<div class="divider divider-style-4 divider-icon-lg">
    <em class="fa fa-chevron-down"></em>
</div>

Icon Positions

HTML Shortcodes 

1
2
3
4
5
6
7
8
9
 
<div class="divider divider-solid divider-style-4 divider-left divider-icon-sm taller">
    <em class="fa fa-chevron-down"></em>
</div>
<div class="divider divider-solid divider-style-4 divider-icon-sm taller">
    <em class="fa fa-chevron-down"></em>
</div>
<div class="divider divider-solid divider-style-4 divider-icon-sm divider-right">
    <em class="fa fa-chevron-down"></em>
</div>

Sizes

HTML Shortcodes 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
 
<h4 class="mt-lg mb-none">Sizes</h4>
<div class="divider divider-style-4 divider-solid divider-xs divider-icon-sm taller">
    <em class="fa fa-chevron-down"></em>
</div>
<div class="divider divider-style-4 divider-solid divider-sm taller">
    <em class="fa fa-chevron-down"></em>
</div>
<div class="divider divider-style-4 divider-solid divider-icon-lg">
    <em class="fa fa-chevron-down"></em>
</div>

Animations

HTML Shortcodes 

1
2
3
 
<div class="divider divider-style-4 taller" data-appear-animation="bounceIn" data-appear-animation-delay="300">
<em class="fa fa-chevron-down"></em>
</div>

Small Lines

Customer Support

Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.

Loved by Customers

Donec id elit non mi porta gravida at eget metus. Fusce dapibus.

Customer Support

Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.

HTML Shortcodes 

 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
 
<hr class="invisible" />
<div class="row">
    <div class="col-md-4">
        <div class="feature-box">
            <div class="feature-box-icon">
                <em class="fa fa-group"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Customer Support</h4>
                <div class="divider divider-small">
                    <hr />
                </div>
                <p class="tall">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="featured-boxes featured-boxes-style-4">
            <div class="featured-box featured-box-primary mt-none mb-none">
                <div class="box-content">
                    <em class="icon-featured fa fa-user"></em>
                    <h4>Loved by Customers</h4>
                    <div class="divider divider-small divider-small-center">
                        <hr />
                    </div>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="feature-box reverse">
            <div class="feature-box-icon">
                <em class="fa fa-group"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Customer Support</h4>
                <div class="divider divider-small divider-small-right">
                    <hr />
                </div>
                <p class="tall">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
            </div>
        </div>
    </div>
</div>
<hr class="invisible" />

Colors

Spacements

Sizes

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">
    <div class="col-md-4">
        <h4 class="mt-lg">Colors</h4>
        <hr class="invisible" />
        <div class="divider divider-small">
            <hr />
        </div>
        <div class="divider divider-primary divider-small">
            <hr />
        </div>
        <div class="divider divider-secondary divider-small">
            <hr />
        </div>
        <div class="divider divider-tertiary divider-small">
            <hr />
        </div>
        <div class="divider divider-quaternary divider-small">
            <hr />
        </div>
        <div class="divider divider-light divider-small">
            <hr />
        </div>
    </div>
    <div class="col-md-4">
        <h4 class="mt-lg">Spacements</h4>
        <hr class="invisible" />
        <div class="divider divider-small">
            <hr />
        </div>
        <div class="divider divider-small tall">
            <hr />
        </div>
        <div class="divider divider-small taller">
            <hr />
        </div>
    </div>
    <div class="col-md-4">
        <h4 class="mt-lg">Sizes</h4>
        <hr class="invisible" />
        <div class="divider divider-small divider-small-sm">
            <hr />
        </div>
        <div class="divider divider-small">
            <hr />
        </div>
        <div class="divider divider-small divider-small-lg">
            <hr />
        </div>
    </div>
</div>