Headers

We provide some basic styling on header tags. In the example, you can see the the 6 header tags' different sizes.

Emphasis

Standard HTML inline tags for emphasizing text are supported out of the box - no extra classes needed.

<p><b>Bold</b> / <strong>Strong</strong></p>
<p><i>Italic</i> / <em>Emphasis</em></p>
<p><u>Underline</u></p>
<p><mark>Marked / highlighted text</mark></p>
<p><del>Deleted text</del> / <ins>Inserted text</ins></p>
<p>Water is H<sub>2</sub>O, and E = mc<sup>2</sup></p>
<p><small>Small print text</small></p>

Blockquotes

Blockquotes are mainly used to give emphasis to a quote or citation. You can also use these for some extra text hierarchy and emphasis.

This is an example quotation that uses the blockquote tag. Here is another line to make it look bigger.

<blockquote>
  This is an example quotation that uses the blockquote tag.
</blockquote>

Flow Text

To use flow-text on a body of text, simply just add the class flow-text to a tag, see the code below.

<p class="flow-text">I am Flow Text</p>

Font Weight & Line Height

Utility classes to set a specific font weight or reset line-height, without needing custom CSS.

<p class="font-weight-100">font-weight-100</p>
<p class="font-weight-200">font-weight-200</p>
<p class="font-weight-300">font-weight-300</p>
<p class="font-weight-400">font-weight-400</p>
<p class="font-weight-500">font-weight-500</p>
<p class="font-weight-600">font-weight-600</p>
<p class="font-weight-700">font-weight-700</p>
<p class="font-weight-800">font-weight-800</p>
<p class="font-weight-900">font-weight-900</p>
<p class="font-weight-lighter">font-weight-lighter</p>
<p class="font-weight-normal">font-weight-normal</p>
<p class="font-weight-bold">font-weight-bold</p>
<p class="font-weight-bolder">font-weight-bolder</p>
<p class="line-height-normal">line-height-normal</p>

Changing the font stack

The Material Design standard uses Roboto font. We have included the font in our framework. In case you don't want to use Roboto on your webpage, fear not. You can change the font stack by modifying the code below to your liking and add it to your custom CSS.

html, button, input, optgroup, select, textarea {
  font-family: GillSans, Calibri, Trebuchet, sans-serif;
}

Alternate Font

Alongside the default font stack, this site ships an optional Muli typeface you can switch to. Try it via the Font selector in the Color Scheme dialog (the palette icon in the navbar) — your choice is saved and reapplied on your next visit.

Under the hood, switching fonts just toggles a data-font attribute on the <html> element:

<html data-font="muli">

which is matched by a rule shipped in the framework itself, so it works the same way anywhere you use Kmaterialize — just load the face (e.g. from Google Fonts) and set the attribute:

html[data-font="muli"] {
  font-family: "Muli", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}