EvoToolkit - v2.3.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

Dependents
This part is required by one or more components to display properly. If the dependent is enabled and this isn't, it will automatically be imported.

  • Overview
  • Theming

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.

BoldDisabled

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

This is disabled by default. Enable block variable $component-typography-decoration-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)

Bold Text

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

UnderlineDisabled

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

This is disabled by default. Enable block variable $component-typography-decoration-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)

Underlined Text

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

EmphasisDisabled

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.

This is disabled by default. Enable block variable $component-typography-decoration-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)

Emphasised Text

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

No WrapDisabled

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.

This is disabled by default. Enable block variable $component-typography-functional-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)

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