UIkit 3 Simple Counter Section

This UIkit snippet, was created to help web designers, front-end developers and back-end developer save time. Use it in your project and build your app faster, You can also download the HTML, CSS, and JS code.

Build with UIkit 3.3.7 in Counter, update June 17, 2020

  • <!-- UIkit CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" />
    
    <!-- UIkit JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
    
    <div class="uk-section uk-section-large">
    	<div class="uk-container">
    		<div class="uk-grid-large" data-uk-grid>
    			<div class="[email protected]">
    				<h2 class="uk-heading-small uk-margin-large-bottom">Section Title</h2>
    				<h3 class="uk-heading-xlarge uk-text-primary">102</h3>
    				<hr class="uk-margin-bottom uk-margin-medium-top tm-small-hr">
    				<h3 class="uk-margin-remove-bottom uk-text-uppercase uk-h5 uk-margin-small-top">Happy Clients</h3>
    			</div> 
    			<div class="[email protected] uk-flex uk-flex-column">
    				<h3 class="uk-margin-auto-top uk-margin-medium-bottom">Get the very best of us by doing the best of you</h3>
    				<div class="uk-child-width-1-3" data-uk-grid>
    					<div>
    						<h3 class="uk-heading-large">16</h3>
    						<hr class="uk-margin-bottom uk-margin-medium-top tm-small-hr">
    						<h3 class="uk-text-uppercase uk-h5 uk-margin-small-top">Years Experience</h3>
    					</div> 
    					<div>
    						<h3 class="uk-heading-large">721</h3>
    						<hr class="uk-margin-bottom uk-margin-medium-top tm-small-hr">
    						<h3 class="uk-text-uppercase uk-h5 uk-margin-small-top">Project Done</h3>
    					</div>
    					<div>
    						<h3 class="uk-heading-large">48</h3>
    						<hr class="uk-margin-bottom uk-margin-medium-top tm-small-hr">
    						<h3 class="uk-text-uppercase uk-h5 uk-margin-small-top">Award Winners</h3>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
  • .tm-small-hr {
    	border-width: 2px;
    	width: 20px;
    }
  • <!-- JS -->

LEAVE A COMMENT

Your email address will not be published.

Related Snippets