Skip to main content


Blaze comes bundled with a nice typography module that covers different text visualisations.

The base font-family is:

.u-text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; } 

This attempts to give your text the same font family output as the device's system font.

It of course can be overridden via CSS or the custom build approach.


To utilise Blaze's consistent styles for hyper-links or to make text look like a hyper-link add the .c-link class.

Highlighting text



To enable greater accessibility you can enable abbreviations on elements.
The tag must have a title attribute :


Keys on a keyboard

When you want to describe what keys to press usually as part of support documentation it's handy to use the keyboard class:

Inline and Multiline code

You can highlight code within a page by using the .u-code class.

Default is inline, to display multi-line snippets add the .u-code--multiline modifier.