Typography

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

The base font-family is: 

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

We don't have a system font family in CSS yet and until we do this is as close as it gets. It of course can be overridden via CSS or the custom build approach.

Here is some background on Medium.com Article: System Shock

Paragraphs

.c-paragraph

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

<p class="c-paragraph">.c-paragraph</p>

Hyper-links

.c-link
primary
secondary
success
error

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

<a class="c-link">hyper-link</a>

Highlighting text

.c-text--highlight

To highlight text simply wrap the words with the highlight class: 

<span class="c-text--highlight">hello world</span>

Emphasising

.c-text--loud
.c-text--quiet

Sometimes you want to shout about something or talk quietly: 

<span class="c-text--loud">arrgh shouting!</span>
<span class="c-text--quiet">whispering</span>

Abbreviations

.c-text--help

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

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

Monospaced

.c-text--mono

This class uses our mono font-family. 

<span class="c-text--mono">.c-text--mono</span>

Keys on a keyboard

.c-kbd

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

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

Inline and Multiline code

.c-code

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

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

<code class="c-code c-code--multiline">
  <h1>hello</h1>
  <h2>world</h2>
</code>

Blockquote

Hello!
- Joe

To quote use the following code to make it stand out from the rest of the page: 

<blockquote class="c-blockquote">
  <div class="c-blockquote__body">
    Hello!
  </div>
  <footer class="c-blockquote__footer">
    - Joe
  </footer>
</blockquote>

.c-blockquote--primary, --secondary, .--success and --error modifiers are all available.