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)
You can show the counters in different layout styles.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<div class="counters"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-append="+" data-to="19000">0</strong> <label>Happy Clients</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-to="15">0</strong> <label>Years in Business</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-to="352">0</strong> <label>Cups of Coffee</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-to="178">0</strong> <label>High Score</label> </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
<div class="counters counters-sm"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-append="+" data-to="19000">0</strong> <label>Happy Clients</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-to="15">0</strong> <label>Years in Business</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-to="352">0</strong> <label>Cups of Coffee</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-to="178">0</strong> <label>High Score</label> </div> </div> </div> </div>
<div class="counters counters-lg"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-append="+" data-to="19000">0</strong> <label>Happy Clients</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-to="15">0</strong> <label>Years in Business</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-to="352">0</strong> <label>Cups of Coffee</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-to="178">0</strong> <label>High Score</label> </div> </div> </div> </div>
<div class="counters"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="counter counter-primary"> <strong data-append="+" data-to="19000">0</strong> <label>Happy Clients</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter counter-secondary"> <strong data-to="15">0</strong> <label>Years in Business</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter counter-tertiary"> <strong data-to="352">0</strong> <label>Cups of Coffee</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter counter-quaternary"> <strong data-to="178">0</strong> <label>High Score</label> </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
<section class="section section-default"> <div class="container"> <div class="counters counters-text-dark"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-append="+" data-to="19000">0</strong> <label>Happy Clients</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-to="15">0</strong> <label>Years in Business</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-to="352">0</strong> <label>Cups of Coffee</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-to="178">0</strong> <label>High Score</label> </div> </div> </div> </div> </div> </section>
<section class="section section-primary"> <div class="container"> <div class="counters counters-text-light"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-append="+" data-to="19000">0</strong> <label>Happy Clients</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-to="15">0</strong> <label>Years in Business</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-to="352">0</strong> <label>Cups of Coffee</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <strong data-to="178">0</strong> <label>High Score</label> </div> </div> </div> </div> </div> </section>
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
<section class="parallax section section-text-light section-parallax section-center mt-none" data-plugin-options="{'speed': 1.5}" data-plugin-parallax="parallax" data-image-src="/portals/1/img/parallax-image.jpg"> <div class="container"> <div class="counters counters-text-light"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="counter"> <em class="fas fa-user"></em> <strong data-to="19000" data-append="+">0</strong> <label>Happy Clients</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <em class="fas fa-star"></em> <strong data-to="15">0</strong> <label>Years in Business</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <em class="fas fa-coffee"></em> <strong data-to="352">0</strong> <label>Cups of Coffee</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <em class="fas fa-chart-bar"></em> <strong data-to="178">0</strong> <label>High Score</label> </div> </div> </div> </div> </div> </section>
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="container"> <div class="counters"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="counter counter-primary"> <em class="fas fa-user"></em> <strong data-append="+" data-to="19000">0</strong> <label>Happy Clients</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter counter-primary"> <em class="fas fa-star"></em> <label>Years in Business</label> <strong data-to="15">0</strong> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter counter-primary"> <strong data-to="352">0</strong> <label>Cups of Coffee</label> <em class="fas fa-coffee"></em> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter counter-side-icon counter-primary"> <em class="fas fa-chart-bar"></em> <strong data-to="178">0</strong> <label>High Score</label> </div> </div> </div> </div> </div>
<div class="counters"> <div class="row"> <div class="col-md-3 col-sm-6"> <div data-appear-animation-delay="300" data-appear-animation="bounceIn" class="counter counter-primary"> <em class="fas fa-user"></em> <strong data-append="+" data-to="19000">0</strong> <label>Happy Clients</label> </div> </div> <div class="col-md-3 col-sm-6"> <div data-appear-animation-delay="600" data-appear-animation="bounceIn" class="counter counter-primary"> <em class="fas fa-star"></em> <strong data-to="15">0</strong> <label>Years in Business</label> </div> </div> <div class="col-md-3 col-sm-6"> <div data-appear-animation-delay="900" data-appear-animation="bounceIn" class="counter counter-primary"> <em class="fas fa-coffee"></em> <strong data-to="352">0</strong> <label>Cups of Coffee</label> </div> </div> <div class="col-md-3 col-sm-6"> <div data-appear-animation-delay="1200" data-appear-animation="bounceIn" class="counter counter-primary"> <em class="fas fa-chart-bar"></em> <strong data-to="178">0</strong> <label>High Score</label> </div> </div> </div> </div>
<div class="counters with-borders"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="counter counter-primary"> <strong data-to="19000" data-append="+">0</strong> <label>Happy Clients</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter counter-primary"> <strong data-to="15">0</strong> <label>Years in Business</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter counter-primary"> <strong data-to="352">0</strong> <label>Cups of Coffee</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter counter-primary"> <strong data-to="178">0</strong> <label>High Score</label> </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
<div class="counters"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="counter counter-primary"> <strong data-plugin-options="{'decimals': 2}" data-to="70.13">0</strong> <label>Decimals</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter counter-with-unit counter-primary"> <strong>$</strong> <strong data-to="15">0</strong> <label>Currency</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter counter-with-unit counter-primary"> <strong data-to="78">0</strong> <strong>%</strong> <label>Percentual</label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter counter-primary"> <strong data-append="+" data-to="5000">0</strong> <label>Append Symbol</label> </div> </div> </div> </div>
<div class="counters"> <div class="row"> <div class="col-md-6"> <div class="counter counter-primary"> <strong data-to="1000" data-plugin-options="{'speed': 5000}">0</strong> <label>Speed</label> </div> </div> <div class="col-md-6"> <div class="counter counter-primary"> <strong data-to="1000" data-plugin-options="{'refreshInterval': 500}">0</strong> <label>Refresh Interval</label> </div> </div> </div> </div>
Porto has more than 0 happy customers.
1 2 3 4 5 6
<div class="row"> <div class="col-md-12"> <p>Porto has more than <strong data-to="19000" data-plugin-counter="DataCounter" data-plugin-options="{'speed': 3500}">0</strong> happy customers.</p> <p>Porto has more than <strong class="alternative-font" data-to="19000" data-plugin-counter="DataCounter" data-plugin-options="{'speed': 3500}">0</strong> happy customers.</p> </div> </div>