Badge

A badge is small text with background color for using as inline text.

The following code examples shows how to use badges:

<span class="badge">Hello World</span>

<span class="badge">
  <em class="badge__key">Hello</em>
  <span class="badge__value">World</span>
</span>

<span class="badge">Hello <span class="badge__divider">|</span> World</span>

<span class="badge">
  <span class="badge__key">Hello World</span>
  <span class="icon icon--user"></span>
</span>

The following list describe all existing block/element/modifier classes of the component.

• .badge - required the block that represent the badge component and contains all elements
• .badge__key - a text within this element is bolder and is often used for key value representations
• .badge__value - a text within this element has a normal weight and is often used for key value representations
• .badge__divider - in this element an inline text or component can be used to divide the content of the badge
• Modifier
  • .badge--{STATE} - this badge represent a speacle state, like warning or error state
  • .badge--{VARIANT} - this badge are different color variants
  • .badge--stretch use width 100%
  • .badge--stretch-{SCREEN_SIZE} until the screen size
  • .badge--ellipsis If the badge within the .badge-bar and have this modifier, a long name will cut with “…” three dots

The variables are:

• STATE info, success, danger, warning
• VARIANT finnet, bronze, dark, zero
• SCREEN_SIZE lg, md, sm, xs

Basic Example:

Size

The size of the badge matches to the font size of the parent element. You can change size of the badge directly with the Font Size modifier.

Icon

A badge with an icon and optional text.

Key-value pair

A badge with key-value pair content

Divider

A badge with a divider for it’s content

Modifier

The component can be customized using class modifiers.

Color Variants

The following examples show all color variants.

Stretch

The following examples show the stretched badge.

Complex Example

The following example combines several badge properties and modifiers in one place