How to Create a List Group with Badges using CSS ?
Last Updated :
04 Apr, 2024
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.
List Group with Badges as Element
You can create badges using the <span> element by styling it using different CSS properties like border-radius, padding, background-color, and color.
Example: The below code illustrates a list group with badges by styling an HTML element.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
List Group with Badges using CSS
</title>
<style>
@import url(
'https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Poppins', sans-serif;
}
span {
border-radius: 50%;
padding: 5px;
background-color: rgb(121, 150, 35);
color: rgb(248, 255, 240);
}
ul>li {
padding: 15px;
list-style: none;
font-size: 20px;
border: 1px solid green;
background-color: rgb(203, 205, 190);
}
ul {
margin: 0 20px;
}
h2 {
text-align: center;
color: green;
}
</style>
</head>
<body>
<div class="box">
<div class="card-content">
<h2>
List Group with Badges
using CSS
</h2>
<ul>
<li>
DSA Questions
<span>90</span>
</li>
<li>
Mern Questions
<span>70</span>
</li>
<li>
NodeJs Questions
<span>110</span>
</li>
<li>
Mongo Db Questions
</li>
<li>
Express JS Questions
</li>
</ul>
</div>
</div>
</body>
</html>
Output:
List Group with Badges as Icons
You can also use the FontAwsome icons and style them using different CSS properties including, border-radius, padding, background-color, and color to create the badges.
Example: The below code illustrates a list group with badges by styling Font Awsome icons.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
List Group 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(215, 240, 215);
}
ul {
margin: 0 20px;
}
h2 {
text-align: center;
color: green;
}
</style>
</head>
<body>
<div class="box">
<div class="card-content">
<h2>
List Group with Badges
with icons
</h2>
<ul>
<li>
DSA Questions
<i class="fa-solid fa-9"></i>
</li>
<li>
Mern Questions
<i class="fa-solid fa-8"></i>
</li>
<li>
NodeJs Questions
</li>
<li>
Mongo Db Questions
</li>
<li>
Express JS Questions
</li>
</ul>
</div>
</div>
</body>
</html>
Output:
Badges with different Colors
The <span> element can be used with different background-color to create the badges of different colors for different list items.
Example: The below code explains how you can create badges with different colors.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
List Group 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(215, 240, 215);
border-radius: 35px;
margin: 10px;
}
ul {
margin: 0 20px;
}
h2 {
text-align: center;
color: green;
}
#s1 {
border-radius: 50%;
background-color: green;
padding: 7px 5px;
color: white;
}
#s2 {
border-radius: 50%;
background-color: rgb(179, 167, 59);
padding: 7px 5px;
color: white;
}
#s3 {
border-radius: 50%;
background-color: rgb(211, 75, 57);
padding: 7px 5px;
color: white;
}
</style>
</head>
<body>
<div class="box">
<div class="card-content">
<h2>
List Group with Badges
with Different Colors
</h2>
<ul>
<li>
DSA Questions
<span id="s1">NEW</span>
</li>
<li>
Mern Questions
<span id="s2">300</span>
</li>
<li>
NodeJs Questions
<span id="s3">100</span>
</li>
</ul>
</div>
</div>
</body>
</html>
Output:
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.
HTML
<!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:
Similar Reads
How to Create Badges using HTML and CSS ?
This article will show you how to create a badge using HTML and CSS. Badges are simple and basic components that are used to display an indicator or count a number. This is quite useful for mail count and alerting purposes, among other things. Badges are identical to labels, with the exception that
2 min read
How to create a Split Button Dropdown using CSS ?
In this article, we will learn how to design a split button dropdown using CSS. Split buttons combine a main button with a dropdown, useful for adding interactive features to your website. This guide helps you improve your web design skills by showing you how to make a split button in easy steps. Ta
4 min read
How to create and style border using CSS ?
The border property is used to create a border around an element and defines how it should look. There are three properties of the border. border-colorborder-widthborder-style border-style property: This defines how the border should look like. It can be solid, dashed, offset, etc. The following val
4 min read
How to create a Hero Image using HTML and CSS ?
A Hero Image is a large image with text, often placed at the top of a webpage. Hero images can be designed using HTML and CSS. This article contains two sections. The first section attaches the image and designs the basic structure. The second section designs the images and texts on the images. The
2 min read
How To Create a Skill Bar using CSS?
A skill bar is a type of progress bar that visually represents your proficiency in various skills, making it easier for recruiters or customers to understand your expertise. We will learn how to create a skill bar using CSS. ApproachThe HTML structure includes a container div with multiple div eleme
3 min read
How to Create Browsers Window using HTML and CSS ?
The browser window is a tool to view the pages from the internet. It is used to search the content on the internet and get relevant information from the internet. Creating Structure: In this section, we will create a basic site structure and also attach the CDN link of the Font-Awesome for the icons
3 min read
How to Create a Stacked Form using CSS ?
A Vertically Stacked Form places labels and inputs on top of each other. To create a stacked form using CSS, we will first define a container with a maximum width, padding, and border radius for styling. Preview: Approach:Begin by creating the basic HTML structure, including the form container and f
2 min read
Create a Button Group using HTML and CSS
This article will show you how to create a Button Group with the help of HTML and CSS. To create the Button Group, first, we create buttons using the HTML <button> element and then apply some CSS styles to make all buttons in a group. First, we create a div container with the class name .butto
2 min read
How to create a split navigation bar using CSS ?
The article will demonstrate how to create a split navigation bar using CSS. There are two ways to make the split navigation bar these are with the help of flexbox properties and CSS position property. A split navigation bar is a popular layout where navigation links are divided into two sections. I
4 min read
How to Create a Ribbon using CSS?
In this article, we will learn how to create a ribbon using CSS. PrerequisitesHTMLCSSApproachThe structure consists of a <button> element with the class "btn" containing the text "GFG DSA Course". Inside the button, there is an <span> element with the class "ribbon" containing the text "
2 min read