Badge - Documentation | www.HtmlElements.com

Overview

Smart.Badge is not a custom element but a specific CSS class name that can be added to a span, div or other HTML element to add exclusive styling to the text inside the element. Badges are used in tabs, menus, lists, etc. They are used as attractive indicators.

To place a badge the user has to include the following files to the head of the page:

  • smart.default.css - the CSS file containing the styles for the badges.

The following code adds a badge to the page.

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <link rel="stylesheet" href=../../source/styles/smart.default.css" type="text/css" />
</head>
<body>
 <span class="smart-badge smart-badge-dark">New</span>
</body>
</html>

Two classes must always be added to the host HTML element that will contain the badge: the smart-badge class name and the theme for the badge, for example smart-badge-light. There are many themes available for the Smart badges.

Demo

Appearance

Badges come in different shapes and colors. The available shapes are:

  • Rectangular: 
    <span class="smart-badge smart-badge-light">Default</span>

    That's the default shape.

    Demo

  • Ellipsis ( pill ): 
    <span class="smart-badge smart-badge-light smart-badge-pill">Light</span>

    In order to make a Smart badge look like a pill, the class smart-badge-pill must be added to the element.

    Demo


The available themes for the badges are the following:

  • Light 
    <span class="smart-badge smart-badge-light">Light</span>

    smart-badge-light is necessary to be applied to set the theme.

    Demo

  • Dark 
    <span class="smart-badge smart-badge-dark">Dark</span>

    smart-badge-dark is necessary to be applied to set the theme.

    Demo

  • Success 
    <span class="smart-badge smart-badge-success">Success</span>

    smart-badge-success is necessary to be applied to set the theme.

    Demo

  • Info 
    <span class="smart-badge smart-badge-info">Info</span>

    smart-badge-info is necessary to be applied to set the theme.

    Demo

  • Warning 
    <span class="smart-badge smart-badge-warning">Warning</span>

    smart-badge-warning is necessary to be applied to set the theme.

    Demo

  • Danger 
    <span class="smart-badge smart-badge-danger">Danger</span>

    smart-badge-danger is necessary to be applied to set the theme.

    Demo

Styling

Smart Badges can be styled easily by changing the CSS attributes of the class smart-badge or by creating a custom theme and using it instead of the already available ones. For example the user can create a new theme called smart-badge-my-custom-theme, set different colors and styles to it and apply it along with the mandatory smart-badge class to an HTML element like so:

<style>
 .smart-badge.smart-badge-my-custom-theme {
     color: #A9A9A9;
     background-color: #eeeeee;
 }
</style>

<span class="smart-badge smart-badge-my-custom-theme">Custom</span>

As a result the user will have it's own uniquely styled Smart badge that can be placed in a menu item for example.

Demo