EvoToolkit - v3.0.0 (Changelog)

Typography

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.

Related Readings

Source

Contributors

Luke Harrison
  • Overview
  • Theming

Table of contents

Base

States

Base

Every typography class can be used on any element, so for example c-type-alpha doesn't always have to be a <h1>.

Where possible, you will want to 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.

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>

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.

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

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

Emphasised Text

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

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>

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

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

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