Skip to main content

Typography

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.

Paragraphs

Use the paragraph class to style your....paragraphs!

<p class="c-paragraph">Use the paragraph class to style your....paragraphs!</p>

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

.c-link
brand
info
warning
success
error
<a href="#" class="c-link">.c-link</a><br />
<a href="#" class="c-link c-link--brand">brand</a><br />
<a href="#" class="c-link c-link--info">info</a><br />
<a href="#" class="c-link c-link--warning">warning</a><br />
<a href="#" class="c-link c-link--success">success</a><br />
<a href="#" class="c-link c-link--error">error</a>

Gradient text

Default gradient
Information
Warning
Success
Error
<div class="u-gradient-text">Default gradient</div>
<div class="u-gradient-text u-gradient-text--info">Information</div>
<div class="u-gradient-text u-gradient-text--warning">Warning</div>
<div class="u-gradient-text u-gradient-text--success">Success</div>
<div class="u-gradient-text u-gradient-text--error">Error</div>

Highlighting text

To highlight text simply wrap the words with the highlight class
<span class="u-text--highlight">To highlight text simply wrap the words with the highlight class</span>

Emphasising

Sometimes you want to shout
other times you want to whisper
<div class="u-text--loud">Sometimes you want to shout</div>
<div class="u-text--quiet">other times you want to whisper</div>

Abbreviations

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

.u-text--help
<abbr class="u-text--help" title="Help text">.u-text--help</abbr>

Monospaced

This class uses our mono font-family.
<span class="u-text--mono">This class uses our mono font-family.</span>

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:

.u-kbd
<kbd class="u-kbd">.u-kbd</kbd>

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.

<code class="u-code u-code--multiline">
  hello
  world
</code>

Blockquote

To quote use the following code to make it stand out from the rest of the page
- Greg
<blockquote class="u-blockquote">
  <div class="u-blockquote__body">
    To quote use the following code to make it stand out from the rest of the page
  </div>
  <footer class="u-blockquote__footer">- Greg</footer>
</blockquote>