Base

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.

<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>

Modifiers

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.

Bold

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

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

Underline

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

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

Emphasis

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.

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

Bare

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>
</p>

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.

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

States

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).

Links

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