BADGES

If you want to show something related to an element or label it, jtbBadges is just for you!

Styles

jtbBadges are dependent to its parent element. Which means that you can call them in anywhere, anytime with using .jtbBadge class.

Hello! I'm a header! Badge!

Hello! I'm a header! Badge!

Hello! I'm a header! Badge!

Hello! I'm a header! Badge!

Hello! I'm a header! Badge!
Hello! I'm a header! Badge!
			Copy
			<h1>Hello! I'm a header! <span class='jtbBadge'>Badge!</span></h1>
<h2>Hello! I'm a header! <span class='jtbBadge'>Badge!</span></h2>
<h3>Hello! I'm a header! <span class='jtbBadge'>Badge!</span></h3>
<h4>Hello! I'm a header! <span class='jtbBadge'>Badge!</span></h4>
<h5>Hello! I'm a header! <span class='jtbBadge'>Badge!</span></h5>
<h6>Hello! I'm a header! <span class='jtbBadge'>Badge!</span></h6>
		

It is also possible to use jtbBadges in misc elements like buttons with inverted style. Just use .jtbBadgeInverted class.

			Copy
			<button class='jtbButton jtbButtonBlue'>Button <span class='jtbBadge jtbBadgeInverted'>4</span></button>
		

Positioning

It is possible to align jtbBadge inside its parent. There are three different options for them: top | middle | bottom.

Hello! I'm a header! Badge!

Hello! I'm a header! Badge!

Hello! I'm a header! Badge!

			Copy
			<h3>Hello! I'm a header! <span class='jtbBadge jtbBadgeTop'>Badge!</span></h3>
<h3>Hello! I'm a header! <span class='jtbBadge jtbBadgeMiddle'>Badge!</span></h3>
<h3>Hello! I'm a header! <span class='jtbBadge jtbBadgeBottom'>Badge!</span></h3>
		

Coloring

There are multiple options for coloring the badges.

Badge! Badge! Badge! Badge! Badge! Badge! Badge!

Badge! Badge! Badge! Badge! Badge! Badge! Badge!
			Copy
			<span class='jtbBadge jtbBadgeNavy'>Badge!</span>
<span class='jtbBadge jtbBadgeGray'>Badge!</span>
<span class='jtbBadge jtbBadgeBlue'>Badge!</span>
<span class='jtbBadge jtbBadgeRed'>Badge!</span>
<span class='jtbBadge jtbBadgeGreen'>Badge!</span>
<span class='jtbBadge jtbBadgeYellow'>Badge!</span>
<span class='jtbBadge jtbBadgeOrange'>Badge!</span>

<span class='jtbBadge jtbBadgeInverted jtbBadgeNavy'>Badge!</span>
<span class='jtbBadge jtbBadgeInverted jtbBadgeGray'>Badge!</span>
<span class='jtbBadge jtbBadgeInverted jtbBadgeBlue'>Badge!</span>
<span class='jtbBadge jtbBadgeInverted jtbBadgeRed'>Badge!</span>
<span class='jtbBadge jtbBadgeInverted jtbBadgeGreen'>Badge!</span>
<span class='jtbBadge jtbBadgeInverted jtbBadgeYellow'>Badge!</span>
<span class='jtbBadge jtbBadgeInverted jtbBadgeOrange'>Badge!</span>
		

Rounding corners

You can round the corners of the badges with using .jtbBadgeRounded class.

Badge! Badge! Badge! Badge! Badge! Badge! Badge!

Badge! Badge! Badge! Badge! Badge! Badge! Badge!
			Copy
			<span class='jtbBadge jtbBadgeNavy jtbBadgeRounded'>Badge!</span>
<span class='jtbBadge jtbBadgeGray jtbBadgeRounded'>Badge!</span>
<span class='jtbBadge jtbBadgeBlue jtbBadgeRounded'>Badge!</span>
<span class='jtbBadge jtbBadgeRed jtbBadgeRounded'>Badge!</span>
<span class='jtbBadge jtbBadgeGreen jtbBadgeRounded'>Badge!</span>
<span class='jtbBadge jtbBadgeYellow jtbBadgeRounded'>Badge!</span>
<span class='jtbBadge jtbBadgeOrange jtbBadgeRounded'>Badge!</span>

<span class='jtbBadge jtbBadgeInverted jtbBadgeNavy jtbBadgeRounded'>Badge!</span>
<span class='jtbBadge jtbBadgeInverted jtbBadgeGray jtbBadgeRounded'>Badge!</span>
<span class='jtbBadge jtbBadgeInverted jtbBadgeBlue jtbBadgeRounded'>Badge!</span>
<span class='jtbBadge jtbBadgeInverted jtbBadgeRed jtbBadgeRounded'>Badge!</span>
<span class='jtbBadge jtbBadgeInverted jtbBadgeGreen jtbBadgeRounded'>Badge!</span>
<span class='jtbBadge jtbBadgeInverted jtbBadgeYellow jtbBadgeRounded'>Badge!</span>
<span class='jtbBadge jtbBadgeInverted jtbBadgeOrange jtbBadgeRounded'>Badge!</span>