`Shields.io Badge` Component

Shields.io Badge is the component to re-create Shields.io SVG badges using HTML+CSS codes and to avoid depending on external server rendering. Bissetii styles this component with an optional enabling trigger.

This component is available starting from v1.11.0.

Sass Styling Parts

The Sass script responsible for styling Shields.io Badge is located at:

assets/css/bissetii/modules/badges/_Shields.scss

To enable Shields.io Badge, you need to set the following config to 1:

$config-badges-shields: 1

Otherwise, all the badges will fall back to the original Definition List styling.

Javascript Parts

This component does not depend on any javascript.

HTML Parts

There are a number of ways to create Bissetii’s Shields.io Badge using a definition list (<dl>) element with shields-badge class tag. There are various possibilities to create the Shields.io badge. However, after analyzing W3C specifications, Bissetii decided to go with <dl> tag in the following methods.

Single Label, Single Value

The MOST RECOMMENDED way to create the tag is using single <dt> label and single <dd> value list. You can concatenate your multiple values under one value on your side. The main reason is the ability to perform inline styling for background color and text color.

Here is an example:

<dl class="shields-badge">
	<dt>Single Line</dt>
	<dd>Value 1, Value 2, Value 3</dd>
</dl>

<dl class="shields-badge">
	<dt>Inline Styling</dt>
	<dd style="background-color: #ff5500; color: yellow;">
		Value 1, Value 2, Value 3
	</dd>
</dl>

<a class="wrap" href="#">
	<dl class="shields-badge">
		<dt>Link Wrapped</dt>
		<dd style="background-color: #ff5500; color: yellow;">
			Value 1, Value 2, Value 3
		</dd>
	</dl>
</a>

This will render as:

Single Line: Value 1, Value 2, Value 3

Inline Styling: Value 1, Value 2, Value 3

Link Wrapped: Value 1, Value 2, Value 3

Single Label, Multi Values

Another way is to create using single <dt> element with multiple <dd> elements. Bissetii automatically inline all the values into a single block.

The drawback for such method is that it is not easy to perform inline value styling. The only color available is the primary theme color.

On example would be:

<dl class="shields-badge">
	<dt>Multi Values</dt>
	<dd>Value 1</dd>
	<dd>Value 2</dd>
	<dd>Value 3</dd>
</dl>

<a class="wrap" href="#">
	<dl class="shields-badge">
		<dt>Linked Wrapped</dt>
		<dd>Value 1</dd>
		<dd>Value 2</dd>
		<dd>Value 3</dd>
	</dl>
</a>