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
<h2> elements to justify it.
Every typography class can be used on any element, so for example
c-type-alpha doesn't always have to be a
Where possible, you will want to align visual hierarchy with semantic hierarchy, by using
c-type-alpha on a
c-type-smallprint on a
<small> for example, but it's not required.
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.
Underlines the text. Use when you need to draw attention to a particular segment of text.
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.
whitespace: no-wrap property to the text so as the viewport gets smaller, the text won't break and go onto multiple lines.
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
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.