Module Themes
Menu Options
Menu Styles
Headers
Layouts
Footers
Breadcrumbs
Granular Styling
Accessibility
Google Translator
RTL
Fast-Track design & development with enterprise functionality in just a few clicks
Customize the font, size, foreground and background colors of each individual component including header, menu (root items, sub menus, active menus, headings, mobile menu, vertical menu, mega menu), body, headings, paragraphs, and links (visited, hover, active)
Sometimes you need to separate the content visually, here are the options:
1
<hr />
1 2 3
<hr class="short" /> <hr class="tall" /> <hr class="taller" />
1 2 3 4
<hr class="solid tall" /> <hr class="dashed tall" /> <hr class="pattern tall" /> <hr class="pattern pattern-2 tall" />
1 2 3 4 5 6 7
<div class="divider"><em class="fas fa-chevron-down"></em></div> <div class="divider"><em class="fas fa-star"></em></div> <div class="divider"><em class="fas fa-bolt"></em></div> <div class="divider divider-solid"><em class="fas fa-chevron-down"></em></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
<div class="divider"><em class="fas fa-chevron-down"></em></div> <div class="divider divider-primary"><em class="fas fa-chevron-down"></em></div> <div class="divider divider-secondary"><em class="fas fa-chevron-down"></em></div> <div class="divider divider-tertiary"><em class="fas fa-chevron-down"></em></div> <div class="divider divider-quaternary"><em class="fas fa-chevron-down"></em></div> <div class="divider divider-style-2 taller"><em class="fas fa-chevron-down"></em></div> <div class="divider divider-style-2 divider-primary taller"><em class="fas fa-chevron-down"></em></div> <div class="divider divider-style-2 divider-secondary taller"><em class="fas fa-chevron-down"></em></div> <div class="divider divider-style-2 divider-tertiary taller"><em class="fas fa-chevron-down"></em></div> <div class="divider divider-style-2 divider-quaternary taller"><em class="fas fa-chevron-down"></em></div> <div class="divider divider-style-3 divider-primary taller"><em class="fas fa-chevron-down"></em></div> <div class="divider divider-style-3 divider-secondary taller"><em class="fas fa-chevron-down"></em></div> <div class="divider divider-style-3 divider-tertiary taller"><em class="fas fa-chevron-down"></em></div> <div class="divider divider-style-3 divider-quaternary taller"><em class="fas fa-chevron-down"></em></div> <div class="divider divider-style-4 taller"><em class="fas fa-chevron-down"></em></div> <div class="divider divider-style-4 divider-primary taller"><em class="fas fa-chevron-down"></em></div> <div class="divider divider-style-4 divider-secondary taller"><em class="fas fa-chevron-down"></em></div> <div class="divider divider-style-4 divider-tertiary taller"><em class="fas fa-chevron-down"></em></div> <div class="divider divider-style-4 divider-quaternary taller"><em class="fas fa-chevron-down"></em></div> <div class="divider pattern divider-style-4 divider-quaternary taller"><em class="fas fa-chevron-down"></em></div>
<div class="divider divider-solid divider-style-4 taller"><em class="fas fa-chevron-down"></em></div>
1 2 3 4 5
<div class="divider divider-style-4 divider-icon-sm taller"><em class="fas fa-chevron-down"></em></div> <div class="divider divider-style-4 taller"><em class="fas fa-chevron-down"></em></div> <div class="divider divider-style-4 divider-icon-lg"><em class="fas fa-chevron-down"></em></div>
<div class="divider divider-solid divider-style-4 divider-left divider-icon-sm taller"><em class="fas fa-chevron-down"></em></div> <div class="divider divider-solid divider-style-4 divider-icon-sm taller"><em class="fas fa-chevron-down"></em></div> <div class="divider divider-solid divider-style-4 divider-icon-sm divider-right"><em class="fas fa-chevron-down"></em></div>
<div class="divider divider-style-4 divider-solid divider-xs divider-icon-sm taller"><em class="fas fa-chevron-down"></em></div> <div class="divider divider-style-4 divider-solid divider-sm taller"><em class="fas fa-chevron-down"></em></div> <div class="divider divider-style-4 divider-solid divider-icon-lg"><em class="fas fa-chevron-down"></em></div>
<div class="divider divider-style-4 taller" data-appear-animation="bounceIn" data-appear-animation-delay="300"> <em class="fas fa-chevron-down"></em> </div>
Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus.
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
<div class="feature-box"> <div class="feature-box-icon"><em class="fas fa-users"></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 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 fas 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 class="feature-box reverse"> <div class="feature-box-icon"><em class="fas fa-users"></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>
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
<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>