UIkit 3 Simple Counter Section

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="uk-width-1-3@m">
    				<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="uk-width-expand@m 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. Required fields are marked *

Related Snippets