Counter Boxes

[kc_row use_container=”yes” _id=”582225″ column_align=”center” force=”__empty__” video_bg_url=”__empty__” parallax_image=”__empty__”][kc_column width=”12/12″ _id=”421981″ video_bg_url=”__empty__”][kc_spacing height=”100px” _id=”148793″][/kc_column][/kc_row][kc_row use_container=”yes” _id=”347209″ css_custom=”{`kc-css`:{`any`:{`box`:{`margin|`:`inherit inherit 30px inherit`}}}}” cols_gap=”{`kc-css`:{}}” animate=”fadeInUp||” column_align=”center” force=”__empty__” video_bg_url=”__empty__” parallax_image=”__empty__”][kc_column width=”12/12″ video_bg_url=”https://www.youtube.com/watch?v=dOWFVKb2JqM” _id=”88483″][kc_title text=”Q291bnRlciBCb3ggRWxlbWVudA==” _id=”832047″ type=”h3″ css_custom=”{`kc-css`:{`any`:{`title-style`:{`text-transform|+.kc_title,.kc_title,.kc_title a.kc_title_link`:`uppercase`,`text-align|+.kc_title,.kc_title,.kc_title a.kc_title_link`:`center`}}}}”][kc_column_text _id=”448224″ css_custom=”{`kc-css`:{}}”]

Jms 4Life includes multiple animated counter elements, including the counter box element. These are great for displaying varying types of data and content to your viewers. The counter boxes include several options for easy customization and they are a great way to display content and attract the viewers eyes as they animate into the screen viewport.

[/kc_column_text][/kc_column][/kc_row][kc_row use_container=”yes” _id=”679418″ css_custom=”{`kc-css`:{`any`:{`box`:{`margin|`:`inherit inherit 80px inherit`}}}}”][kc_column width=”33.33%” _id=”470804″ css_custom=”{`kc-css`:{`767`:{`box`:{`margin|`:`inherit inherit 30px inherit`}}}}”][kc_counter_box number=”250″ label=”Support Threads Resolved” label_above=”yes” icon_show=”yes” icon=”fa-headphones” _id=”428421″ css_custom=”{`kc-css`:{`any`:{`label`:{`color|h4`:`#34495e`,`text-transform|h4`:`uppercase`},`number`:{`color|.counterup`:`#ffd970`},`icon`:{`color|i`:`#ffd970`,`margin|i`:`inherit inherit 0px inherit`},`box-style`:{`border|`:`1px solid #ebebeb`,`padding|`:`15px inherit 30px inherit`}}}}” animate=”zoomIn|200|”][/kc_column][kc_column width=”33.33%” _id=”938044″ css_custom=”{`kc-css`:{`767`:{`box`:{`margin|`:`inherit inherit 30px inherit`}}}}”][kc_counter_box number=”1500″ label=”CUPS OF COFFEE” label_above=”yes” icon_show=”yes” icon=”fa-coffee” _id=”283877″ css_custom=”{`kc-css`:{`any`:{`label`:{`color|h4`:`#34495e`,`text-transform|h4`:`uppercase`},`number`:{`color|.counterup`:`#1abc9c`},`icon`:{`color|i`:`#1abc9c`,`margin|i`:`inherit inherit 0px inherit`},`box-style`:{`border|`:`1px solid #ebebeb`,`padding|`:`15px inherit 30px inherit`}}}}” animate=”zoomIn|300|”][/kc_column][kc_column width=”33.33%” _id=”56248″][kc_counter_box number=”18,600″ label=”Hours of Development” label_above=”yes” icon_show=”yes” icon=”fa-clock-o” _id=”580122″ css_custom=”{`kc-css`:{`any`:{`label`:{`color|h4`:`#34495e`,`text-transform|h4`:`uppercase`},`number`:{`color|.counterup`:`#3498db`},`icon`:{`color|i`:`#3498db`,`margin|i`:`inherit inherit 0px inherit`},`box-style`:{`border|`:`1px solid #ebebeb`,`padding|`:`15px inherit 30px inherit`}}}}” animate=”zoomIn|400|”][/kc_column][/kc_row][kc_row use_container=”yes” _id=”240845″ css_custom=”{`kc-css`:{`any`:{`box`:{`margin|`:`inherit inherit 30px inherit`}}}}” cols_gap=”{`kc-css`:{}}” animate=”zoomIn||” column_align=”center” force=”__empty__” video_bg_url=”__empty__” parallax_image=”__empty__”][kc_column width=”12/12″ video_bg_url=”https://www.youtube.com/watch?v=dOWFVKb2JqM” _id=”893444″][kc_column_text _id=”67029″ css_custom=”{`kc-css`:{`any`:{`box`:{`background|`:`eyJjb2xvciI6IiNmOGY4ZjgiLCJsaW5lYXJHcmFkaWVudCI6WyIiXSwiaW1hZ2UiOiJub25lIiwicG9zaXRpb24iOiIwJSAwJSIsInNpemUiOiJhdXRvIiwicmVwZWF0IjoicmVwZWF0IiwiYXR0YWNobWVudCI6InNjcm9sbCIsImFkdmFuY2VkIjowfQ==`,`padding|`:`20px 20px 15px 20px`}}}}”]

Control all text styles

Counter boxes allow you to control every color needed from borders, to title and body text and also font awesome icons. In addition, you can also control the sizes of fonts and icons.

[/kc_column_text][/kc_column][/kc_row][kc_row use_container=”yes” _id=”855904″][kc_column width=”50%” _id=”944375″ css_custom=”{`kc-css`:{`767`:{`box`:{`margin|`:`inherit inherit 30px inherit`}}}}”][kc_counter_box number=”1400″ label=”WONDERFUL USERS & COUNTING” label_above=”yes” _id=”848740″ css_custom=”{`kc-css`:{`any`:{`label`:{`color|h4`:`#34495e`,`text-transform|h4`:`uppercase`},`number`:{`color|.counterup`:`#515ad1`},`icon`:{`color|i`:`#515ad1`,`margin|i`:`inherit inherit 0px inherit`},`box-style`:{`border|`:`1px solid #ebebeb`,`padding|`:`15px inherit 15px inherit`}}}}” animate=”zoomIn|200|”][kc_spacing height=”30px” _id=”109401″][kc_counter_box number=”250″ label=”Support Threads Resolved” label_above=”yes” _id=”811482″ css_custom=”{`kc-css`:{`any`:{`label`:{`color|h4`:`#34495e`,`text-transform|h4`:`uppercase`},`number`:{`color|.counterup`:`#ffd970`},`icon`:{`color|i`:`#ffd970`,`margin|i`:`inherit inherit 0px inherit`},`box-style`:{`border|`:`1px solid #ebebeb`,`padding|`:`15px inherit 15px inherit`}}}}” animate=”zoomIn|400|”][/kc_column][kc_column width=”50%” _id=”886409″][kc_counter_box number=”1500″ label=”CUPS OF COFFEE” label_above=”yes” _id=”657763″ css_custom=”{`kc-css`:{`any`:{`label`:{`color|h4`:`#34495e`,`text-transform|h4`:`uppercase`},`number`:{`color|.counterup`:`#1abc9c`},`icon`:{`color|i`:`#1abc9c`,`margin|i`:`inherit inherit 0px inherit`},`box-style`:{`border|`:`1px solid #ebebeb`,`padding|`:`15px inherit 15px inherit`}}}}” animate=”zoomIn|300|”][kc_spacing height=”30px” _id=”602512″][kc_counter_box number=”18,600″ label=”Hours of Development” label_above=”yes” _id=”159187″ css_custom=”{`kc-css`:{`any`:{`label`:{`color|h4`:`#34495e`,`text-transform|h4`:`uppercase`},`number`:{`color|.counterup`:`#3498db`},`icon`:{`color|i`:`#3498db`,`margin|i`:`inherit inherit 0px inherit`},`box-style`:{`border|`:`1px solid #ebebeb`,`padding|`:`15px inherit 15px inherit`}}}}” animate=”zoomIn|500|”][/kc_column][/kc_row][kc_row use_container=”yes” _id=”285538″ column_align=”center” force=”__empty__” video_bg_url=”__empty__” parallax_image=”__empty__”][kc_column width=”12/12″ _id=”556888″ video_bg_url=”__empty__”][kc_spacing height=”100px” _id=”766835″][/kc_column][/kc_row]