How to design a circle widgets

[Stiphilan10]

could some help me to achieve this task? I dont know how to design this kind of design.

Reference: I need to design like the red colour circle widgets.

I'm attaching the model screen shot below.

[Sonali Nimbalk1]

Hi @Stiphilan10 ,

For Circle Design for the widget, please refer to HTML and CSS code.

<div style="text-align:center">
  <h1>Round Dots / Circles</h1>
  <span class="dot red">
  	<span class="circleNo">10</span> 
  	<span class="text">All Records</span>
  </span>
  <span class="dot">
    <span class="circleNo">20</span>
    <span class="text">Incident</span>
  </span>
  <span class="dot">
    <span class="circleNo">30</span>
    <span class="text">Problem</span>
  </span>
  <span class="dot">
  <span class="circleNo">40</span>
  <span class="text">Change</span>
  </span>
</div>

CSS

.dot {
  height: 100px;
  width: 100px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  text-align:center
}
 .red{
  background-color: #ff0000;
}
.circleNo{
    position: relative;
    top: 35px;
    font-size: 25px;
    font-weight: bold;
    color: #fff;
}
span.text {
  position: absolute;
  top: 195px;
  display: block;
  margin-left: 25px;
  
}

Please hit like and mark my response as correct if that helps

Regards,
Sonali Nimbalka

[Uday_Kumar]

Hi @Stiphilan10 How are you ?

In order to create this widget you need to design using HTML and CSS. I am pasting the HTML and CSS code for you just create one widget and paste those codes you will get it.

HTML:

<div style="display:flex; flex-direction:column; ">
<h3 style="color:black;  padding:10px 0px 10px 270px;">
  My Stuff
  </h3>
  <div style="display:flex; gap:40px; justify-content:center;">
    <div>
      <div class="red">
      11
    </div>
      <h4>
        All Records
      </h4>
    </div>
    <div>
      <div class="red">
      2
    </div>
      <h4>
        Incidents
      </h4>
    </div>
    <div>
      <div class="red">
      9
    </div>
      <h4>
        Requests
      </h4>
    </div>
    <div>
      <div class="red">
      0
    </div>
      <h4>
        Approvals
      </h4>
    </div>
    <div>
      <div class="red">
      0
    </div>
      <h4>
        Watched Items
      </h4>
    </div>
  </div>
</div>

CSS:

*{
  padding:0;
  margin:0;
  box-sizing:border-box;
}
.red:hover{
  background-color:red;
  height:90px;
  width:90px;
  border-radius:50%;
  
}
.red{
  background-color:black;
  text-align:center;
  color:white;
  width:80px;
  border-radius:50px; 
  height:80px;
  cursor:pointer;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:30px;
}
.red:active{
  background-color:blue;
}
h4{
  font-size:15px;
  color:black;
  text-align:center;
  padding-top:10px;
}
h4:hover{
  color:red;
}

The Output is here 😍:

Please hit like 👍 and mark my response as correct if that helps you

Thanks & Regards

Uday Kumar Valapudasu