Badges with Various Shapes
The badges with various shapes can be created by styling the <span> element with CSS property i.e., border-radius for each corner.
Example: The below example demonstrates the creation of badges with different shapes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
List Group hovered List
with badges using CSS
</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
@import url(
'https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Poppins', sans-serif;
}
i {
border-radius: 50%;
padding: 10px;
background-color: green;
color: aliceblue;
}
ul>li {
padding: 15px;
list-style: none;
font-size: 20px;
border: 1px solid green;
background-color: rgb(219, 244, 175);
border-radius: 15px;
margin: 10px;
}
ul {
margin: 0 20px;
}
h2 {
text-align: center;
color: green;
}
#s1 {
background-color: rgb(193, 117, 228);
padding: 7px 5px;
}
#s2 {
border-radius: 10% 50%;
background-color: rgb(211, 75, 57);
padding: 7px 5px;
color: white;
}
#s3 {
border-radius: 10% 20%;
background-color: rgb(235, 164, 155);
padding: 7px 5px;
}
</style>
</head>
<body>
<div class="box">
<div class="card-content">
<h2>
List Group with Badges
with various shapes
</h2>
<ul>
<li>
DSA Questions
<span id="s1">NEW</span>
</li>
<li>
Mern Questions
<span id="s2"> 90</span>
</li>
<li>
NodeJs Questions
<span id="s3">100</span>
</li>
</ul>
</div>
</div>
</body>
</html>
Output:
How to Create a List Group with Badges using CSS ?
A List Group with Badges is a UI pattern that combines a list of items with additional visual indicators (badges) to convey extra information. Badges allow you to visually highlight or categorize items within a list.
This is especially beneficial when you want to draw attention to specific elements or provide additional context. We can create badges by styling simple HTML elements or by using Icons.
Table of Content
- List Group with Badges as Element
- List Group with Badges as Icons
- Badges with different Colors
- Badges with Various Shapes