EvoToolkit - v3.7.2 (Changelog)


A collection of typography elements for various roles. In order to separate our semantic decisions from our stylistic ones, we only define typographical styles against classes, NOT against typographic HTML elements. This means any HTML element can be made into a heading.

Example: Would prevent a case where we want to use a <h3> because of how it looks, but can't because we don't have any prior <h1> or <h2> elements to justify it.

Though where possible, you should align visual hierarchy with semantic hierarchy, by using c-type-alpha on a <h1> and c-type-smallprint on a <small> for example, but it's not required.

Related Readings



Luke Harrison
  • Overview
  • Theming

Table of contents




Typography classes are automatically generated using the $typography object. This means it's much easier to add new, edit existing, or remove unwanted sizings in a project without editing source files. Overrides can be managed using the set-typography() tool, with the defaults listen below.

Heading Alpha

Heading Bravo

Heading Charlie

Heading Delta

Heading Echo
Heading Foxtrot
Default Body Text
Small Print
<h1 class="c-type-alpha">Heading Alpha</h1>
<h2 class="c-type-bravo">Heading Bravo</h2>
<h3 class="c-type-charlie">Heading Charlie</h3>
<h4 class="c-type-delta">Heading Delta</h4>
<h5 class="c-type-echo">Heading Echo</h5>
<div class="c-type-foxtrot">Heading Foxtrot</div>
<div class="c-type-body">Default Body Text</div>
<div class="u-align-center"><a href="#" class="c-type-link">Link</a></div>
<small class="c-type-smallprint">Small Print</small>


A list of modifiers for the typography 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.


Makes your text bold. Typically used for headings or other prominant text.

Bold Text

<h1 class='c-type-charlie c-type--bold'>Bold Text</h1>


Underlines the text. Use when you need to draw attention to a particular segment of text.

Underlined Text

<p class='c-type-charlie c-type--underline'>Underlined Text</p>


Adds more emphasis by making it both bold and underlined. You would typically use this to increase the impact of text so it's more noticable.

Emphasised Text

<h1 class='c-type-charlie c-type--emphasis'>Emphasised Text</h1>


Allows you to strip underline decorations added by other classes.

<p class="u-align-center">
	<a href="/" class='c-type-charlie c-type--bare'>Bare Text</a>

No Wrap

Adds a whitespace: no-wrap property to the text so as the viewport gets smaller, the text won't break and go onto multiple lines.

I won't wrap onto multiple lines

<h1 class='c-type-charlie c-type--nowrap'>I won't wrap onto multiple lines</h1>


This typography component has multiple states available. These can also be combined with any combination of modifiers, unless stated otherwise.

Most states are also activated when a parent component has the same state applied. For example, if a fieldset element is disabled or has an is-disabled class, this will also activate the disabled state for all its child components with states available.

This behaviour can be disabled by adding a --disable-state-inheritance modifier class to the element inheriting the state (For example, for c-button, the class would be c-button--disable-state-inheritance).

<p class="u-align-center">
	<a href="/" class="c-type-link">Normal Link</a>
	<a href="/" class="c-type-link is-positive">Positive Link</a>
	<a href="/" class="c-type-link is-caution">Caution Link</a>
	<a href="/" class="c-type-link is-negative">Negative Link</a>
	<a href="/" class="c-type-link is-info">Info Link</a>

You can theme the typography 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-typography-link-color primary
$component-typography-focus-color accent