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.

Table of Content

List Group with Badges as Element
List Group with Badges as Icons
Badges with different Colors
Badges with Various Shapes

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:

ListOP

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:

ListOP

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:

ListOP

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>