How to create a "section counter" with CSS?


On various websites, a counter is added to display the downloads, views, traffic or analytics. Some websites also display the count of clients, countries they server, etc. These are also displayed using the section counter.

Set the Parent Container

To create the section counter, first set a parent div within which all the divs will get created for each child −

<div class="sectionContainer">
   <!--  set the child divs  -->
<div>

Set the Child Divs for Each Counter

Now, we will create separate child divs for each counter item. Within each, we have a div for section card as well −

<div class="section">
   <div class="sectionCard">
      <p><i class="fa fa-mobile" aria-hidden="true"></i></p>
      <h3>100000+</h3>
      <p>Downloads</p>
   </div>
</div>
<div class="section">
   <div class="sectionCard">
      <p><i class="fa fa-globe" aria-hidden="true"></i></p>
      <h3>5000+</h3>
      <p>Outlets over the globe</p>
   </div>
</div>
<div class="section">
   <div class="sectionCard">
      <p><i class="fa fa-bar-chart" aria-hidden="true"></i> </p>
      <h3>Top Performer</h3>
      <p>In past 5 years</p>
   </div>
</div>
<div class="section">
   <div class="sectionCard">
      <p><i class="fa fa-handshake-o" aria-hidden="true"></i></p>
      <h3>3000+</h3>
      <p>Partners</p>
   </div>
</div>

Style Each Section Item on the Left

All the items are aligned on the left using the float property −

.section {
	float: left;
	width: 25%;
	padding: 0 5px;
}

Set Each Card

As shown above, each card is set with an icon, for example, the mobile icon here. We have set different icons for different cards −

<div class="sectionCard">
   <p><i class="fa fa-mobile" aria-hidden="true"></i></p>
   <h3>100000+</h3>
   <p>Downloads</p>
</div>

Icons

The font awesome icons are used as shown above while adding the mobile icon. We have added the following CDN path for the Font Awesome icons in the beginning to use it on our web page −

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />

Style Each Card

We have styled each card and the box-shadow is also set. The text is aligned in the center using the text-align property −

.sectionCard {
	box-shadow: 0 4px 8px 0 rgb(127, 16, 172);
	padding: 16px;
	text-align: center;
	background-color: rgb(127, 16, 172);
	color: rgb(255, 255, 255);
}

Example

To create a section counter with CSS, the code is as follows −

<!DOCTYPE html>
<html>
<head>
   <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
   integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
   <style>
      * {
         box-sizing: border-box;
      }
      body {
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
      }
      .section {
         float: left;
         width: 25%;
         padding: 0 5px;
      }
      .sectionContainer {margin: 0 -5px;}
      .sectionContainer:after {
         content: "";
         display: table;
         clear: both;
      }
      .sectionCard {
         box-shadow: 0 4px 8px 0 rgb(127, 16, 172);
         padding: 16px;
         text-align: center;
         background-color: rgb(127, 16, 172);
         color: rgb(255, 255, 255);
      }
      .fa {font-size:50px;}
   </style>
</head>
<body>
   <h1>Responsive Section Counter Example</h1>
   <br>
   <div class="sectionContainer">
      <div class="section">
         <div class="sectionCard">
            <p><i class="fa fa-mobile" aria-hidden="true"></i></p>
            <h3>100000+</h3>
            <p>Downloads</p>
         </div>
      </div>
      <div class="section">
         <div class="sectionCard">
            <p><i class="fa fa-globe" aria-hidden="true"></i></p>
            <h3>5000+</h3>
            <p>Outlets over the globe</p>
         </div>
      </div>
      <div class="section">
         <div class="sectionCard">
            <p><i class="fa fa-bar-chart" aria-hidden="true"></i> </p>
            <h3>Top Performer</h3>
            <p>In past 5 years</p>
         </div>
      </div>
      <div class="section">
         <div class="sectionCard">
            <p><i class="fa fa-handshake-o" aria-hidden="true"></i></p>
            <h3>3000+</h3>
            <p>Partners</p>
         </div>
      </div>
   </div>
</body>
</html>

Updated on: 17-Nov-2023

304 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements