Foundation CSS Badge

The Badge component in Foundation CSS provides a simple and visually appealing way to display notifications, counts, or status indicators within your web application. Badges are often used to highlight new or unread items, display numeric values, or indicate the status of an item. Here's how you can use the Badge component:

1. Basic Badge

To create a basic Badge, use the <span> element with the badge class.

Example markup:

<span class="badge">New</span>

This will generate a default Badge with the text "New".

2. Customizing Badge Content

You can customize the content of the Badge by placing text or other elements inside the <span> element.

Example markup:

<span class="badge">5</span>

This will create a Badge with the numeric value "5".

3. Styling the Badge

You can apply custom styles to the Badge using CSS. Foundation CSS provides classes for styling various aspects of the Badge, such as its background color, text color, and size.

Example markup:

<span class="badge primary">New</span>

Example CSS:

.badge {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

.primary {
    background-color: #007bff;
    color: #fff;
}

This will create a styled Badge with a blue background color.

Conclusion

The Badge component in Foundation CSS offers a versatile way to incorporate notification and status indicators into your web applications. Whether you need a basic Badge or one with customized content and styles, Foundation CSS provides the tools to create a Badge that meets your specific needs.

Archive