EvoToolkit - v2.3.0 (Changelog)


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



Luke Harrison
  • Overview
  • Theming


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-margin-bottom-small">Example heading<span class="c-badge">New</span></h1> <h2 class="c-type-bravo u-margin-bottom-small">Example heading<span class="c-badge u-theme-primary">New</span></h2> <h3 class="c-type-charlie u-margin-bottom-small">Example heading<span class="c-badge u-theme-accent">New</span></h3> <h4 class="c-type-delta u-margin-bottom-small">Example heading<span class="c-badge u-theme-positive">New</span></h4> <h5 class="c-type-echo u-margin-bottom-small">Example heading<span class="c-badge u-theme-negative">New</span></h5>

Example 2

  • Mercedes Benz23
  • Audi 15
  • Range Rover 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 o-box--spacing-small">1</div> </div> <div class="c-tabs__content-item"> <div class="o-box o-box--spacing-small">2</div> </div> <div class="c-tabs__content-item"> <div class="o-box o-box--spacing-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>
<h1 class="c-type-echo u-margin-bottom-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>


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.


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.

This is disabled by default. Enable block variable $component-badge-size-modifiers or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)

Example headingStandard

Example headingSmall

Example headingTiny

<h1 class="c-type-charlie u-margin-bottom-small">Example heading<span class="c-badge">Standard</span></h1> <h1 class="c-type-charlie u-margin-bottom-small">Example heading<span class="c-badge c-badge--small">Small</span></h1> <h1 class="c-type-charlie u-margin-bottom-small">Example heading<span class="c-badge c-badge--tiny">Tiny</span></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