EvoToolkit - v3.7.2 (Changelog)

Badge

Use badges for suplimentary information such as single word labels or counts.

Source

Contributors

Luke Harrison
  • Overview
  • Theming

Table of contents

Base

Modifiers

Base

Example 1

The standard badge comes in grey, but using the theme utilities, you can change the colour to make it more contextual.

Example headingNew

Example headingNew

Example headingNew

Example headingNew

Example headingNew
<h1 class="c-type-alpha u-mb-small">Example heading<span class="c-badge">New</span></h1>
<h2 class="c-type-bravo u-mb-small">Example heading<span class="c-badge u-theme-primary">New</span></h2>
<h3 class="c-type-charlie u-mb-small">Example heading<span class="c-badge u-theme-accent">New</span></h3>
<h4 class="c-type-delta u-mb-small">Example heading<span class="c-badge u-theme-positive">New</span></h4>
<h5 class="c-type-echo u-mb-small">Example heading<span class="c-badge u-theme-negative">New</span></h5>

Example 2

  • Mercedes Benz23
  • Audi 15
  • Range Rover 3
1
2
3
<div class="c-tabs">
	<ul class="o-layout o-layout--flush o-layout--fit-height c-tabs__layout">
		<li class="o-layout__item c-tabs__item is-active" tabindex="0"><div class="c-tabs__item-inner">Mercedes Benz<span class="c-badge u-theme-positive">23</span></div></li>
		<li class="o-layout__item c-tabs__item" tabindex="0"><div class="c-tabs__item-inner">Audi <span class="c-badge u-theme-caution">15</span></div></li>
		<li class="o-layout__item c-tabs__item" tabindex="0"><div class="c-tabs__item-inner">Range Rover <span class="c-badge u-theme-negative">3</span></div></li>
	</ul>
	<div class="c-tabs__content">
		<div class="c-tabs__content-item is-active">
			<div class="o-box u-p-small">1</div>
		</div>
		<div class="c-tabs__content-item">
			<div class="o-box u-p-small">2</div>
		</div>
		<div class="c-tabs__content-item">
			<div class="o-box u-p-small">3</div>
		</div>
	</div>
</div>

Example 3

<button class="c-button">My Button<span class="c-badge u-theme-very-light">New</span></button>

Link Example

Tags

Cars Tractors Halle Berry Jupitor David Bowie 
<h1 class="c-type-echo u-mb-micro">Tags</h1>
<a href="/" class="c-badge u-theme-primary u-margin-none">Cars</a>
<a href="/" class="c-badge u-theme-primary">Tractors</a>
<a href="/" class="c-badge u-theme-primary">Halle Berry</a>
<a href="/" class="c-badge u-theme-primary">Jupitor</a>
<a href="/" class="c-badge u-theme-primary">David Bowie</a>

Modifiers

A list of modifiers for the badge component, allowing you to change its appearance to fit a variety of roles and scenarios.

Modifiers can typically be combined to achieve the desired appearance, unless stated otherwise.

Sizes

Whilst badges scale according to its parent element, sometimes a badge may just be too big. Use these modifiers to make the badge a better fit.

Example headingStandard

Example headingSmall

Example headingTiny

<h1 class="c-type-charlie u-mb-small">Example heading<span class="c-badge">Standard</span></h1>
<h1 class="c-type-charlie u-mb-small">Example heading<span class="c-badge c-badge--small">Small</span></h1>
<h1 class="c-type-charlie u-mb-small">Example heading<span class="c-badge c-badge--tiny">Tiny</span></h1>

Reverse

Reverse the badge margins from left to right.

Example headingStandard

ReversedExample heading

<h1 class="c-type-charlie u-mb-small">Example heading<span class="c-badge">Standard</span></h1>
<h1 class="c-type-charlie u-mb-small"><span class="c-badge c-badge--reverse">Reversed</span>Example heading</h1>

You can theme the badge component to make it fit your brand. For more information on theming EvoToolkit, please see Configuring EvoToolkit.

Below is a list of theme variables and their default values.

Theme Variables

Theme Variables Default
$component-badge-color dark