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)
Accordions are great to show the content of your website and can be set in different styles.
Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa.
Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.
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
<div class="accordion" id="accordion"> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1One"> Accordion Title 1 </a> </h4> </div> <div id="collapse1One" class="accordion-body collapse show"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa.</p> </div> </div> </div> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1Two"> Accordion Title 2 </a> </h4> </div> <div id="collapse1Two" class="accordion-body collapse"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1Three"> Accordion Title 3 </a> </h4> </div> <div id="collapse1Three" class="accordion-body collapse"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </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
<div class="accordion accordion-primary" id="accordion2Primary"> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2Primary" href="#collapse2PrimaryOne"> Accordion Title 1 </a> </h4> </div> <div id="collapse2PrimaryOne" class="accordion-body collapse show"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2Primary" href="#collapse2PrimaryTwo"> Accordion Title 2 </a> </h4> </div> <div id="collapse2PrimaryTwo" class="accordion-body collapse"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2Primary" href="#collapse2PrimaryThree"> Accordion Title 3 </a> </h4> </div> <div id="collapse2PrimaryThree" class="accordion-body collapse"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> </div>
<div class="accordion accordion-secondary" id="accordion2Secondary"> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2Secondary" href="#collapse2SecondaryOne"> Accordion Title 1 </a> </h4> </div> <div id="collapse2SecondaryOne" class="accordion-body collapse show"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2Secondary" href="#collapse2SecondaryTwo"> Accordion Title 2 </a> </h4> </div> <div id="collapse2SecondaryTwo" class="accordion-body collapse"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2Secondary" href="#collapse2SecondaryThree"> Accordion Title 3 </a> </h4> </div> <div id="collapse2SecondaryThree" class="accordion-body collapse"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> </div>
<div class="accordion accordion-tertiary" id="accordion2Tertiary"> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2Tertiary" href="#collapse2TertiaryOne"> Accordion Title 1 </a> </h4> </div> <div id="collapse2TertiaryOne" class="accordion-body collapse show"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2Tertiary" href="#collapse2TertiaryTwo"> Accordion Title 2 </a> </h4> </div> <div id="collapse2TertiaryTwo" class="accordion-body collapse"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2Tertiary" href="#collapse2TertiaryThree"> Accordion Title 3 </a> </h4> </div> <div id="collapse2TertiaryThree" class="accordion-body collapse"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> </div>
<div class="accordion accordion-quaternary" id="accordion2Quaternary"> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2Quaternary" href="#collapse2QuaternaryOne"> Accordion Title 1 </a> </h4> </div> <div id="collapse2QuaternaryOne" class="accordion-body collapse show"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2Quaternary" href="#collapse2QuaternaryTwo"> Accordion Title 2 </a> </h4> </div> <div id="collapse2QuaternaryTwo" class="accordion-body collapse"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2Quaternary" href="#collapse2QuaternaryThree"> Accordion Title 3 </a> </h4> </div> <div id="collapse2QuaternaryThree" class="accordion-body collapse"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> </div>
Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.
<div class="accordion accordion-sm" id="accordion3"> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapse3One"> Accordion Title 1 </a> </h4> </div> <div id="collapse3One" class="accordion-body collapse show"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.</p> </div> </div> </div> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapse3Two"> Accordion Title 2 </a> </h4> </div> <div id="collapse3Two" class="accordion-body collapse"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapse3Three"> Accordion Title 3 </a> </h4> </div> <div id="collapse3Three" class="accordion-body collapse"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> </div>
<div class="accordion" id="accordion4"> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion4" href="#collapse4One"> Accordion Title 1 </a> </h4> </div> <div id="collapse4One" class="accordion-body collapse show"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.</p> </div> </div> </div> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion4" href="#collapse4Two"> Accordion Title 2 </a> </h4> </div> <div id="collapse4Two" class="accordion-body collapse"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion4" href="#collapse4Three"> Accordion Title 3 </a> </h4> </div> <div id="collapse4Three" class="accordion-body collapse"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> </div>
Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.
Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.
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
<div class="accordion accordion-lg" id="accordion5"> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion5" href="#collapse5One"> Accordion Title 1 </a> </h4> </div> <div id="collapse5One" class="accordion-body collapse show"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.</p> <img alt="device" class="pull-left" width="150" height="106" src="/portals/1/img/device.png" /> <p>Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.</p> </div> </div> </div> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion5" href="#collapse5Two"> Accordion Title 2 </a> </h4> </div> <div id="collapse5Two" class="accordion-body collapse"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion5" href="#collapse5Three"> Accordion Title 3 </a> </h4> </div> <div id="collapse5Three" class="accordion-body collapse"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </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
<div class="accordion" id="accordion6"> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion6" href="#collapse6One"> <em class="fas fa-users"></em> Accordion Title 1 </a> </h4> </div> <div id="collapse6One" class="accordion-body collapse show"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.</p> </div> </div> </div> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion6" href="#collapse6Two"> <em class="fas fa-film"></em> Accordion Title 2 </a> </h4> </div> <div id="collapse6Two" class="accordion-body collapse"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion6" href="#collapse6Three"> <em class="fas fa-bars"></em> Accordion Title 3 </a> </h4> </div> <div id="collapse6Three" class="accordion-body collapse"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> </div>
<div class="accordion without-bg" id="accordion7"> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion7" href="#collapse7One"> Accordion Title 1 </a> </h4> </div> <div id="collapse7One" class="accordion-body collapse show"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.</p> </div> </div> </div> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion7" href="#collapse7Two"> Accordion Title 2 </a> </h4> </div> <div id="collapse7Two" class="accordion-body collapse"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion7" href="#collapse7Three"> Accordion Title 3 </a> </h4> </div> <div id="collapse7Three" class="accordion-body collapse"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> </div>
<div class="accordion without-bg without-borders" id="accordion8"> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion8" href="#collapse8One"> Accordion Title 1 </a> </h4> </div> <div id="collapse8One" class="accordion-body collapse show"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.</p> </div> </div> </div> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion8" href="#collapse8Two"> Accordion Title 2 </a> </h4> </div> <div id="collapse8Two" class="accordion-body collapse"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div class="card card-default"> <div class="card-header"> <h4 class="card-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion8" href="#collapse8Three"> Accordion Title 3 </a> </h4> </div> <div id="collapse8Three" class="accordion-body collapse"> <div class="card-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> </div>