Typography utilities for headings, body text, small text, and font styles.

Headings
Class Example
.mdst-h1

Heading 1
.mdst-h2

Heading 2
.mdst-h3

Heading 3
.mdst-h4

Heading 4
.mdst-h5
Heading 5
.mdst-h6
Heading 6
Paragraph
Class Example
.mdst-p

Default paragraph text.
.mdst-p--sm

Small paragraph text.
.mdst-p--lg

Large paragraph text.
.mdst-p--muted

Muted paragraph text.
Inline Elements
Class Example
.mdst-a Link text
.mdst-strong Bold text
.mdst-em Italic text
.mdst-small Small text
.mdst-mark Highlighted text
.mdst-kbd Press Ctrl + K to search
.mdst-abbr CSS (hover for the expansion)
.mdst-del Removed text
.mdst-ins Added text
.mdst-s £40 £32
.mdst-cite The Elements of Style
.mdst-samp Output: File saved.
.mdst-var Area = w × h
.mdst-sub H2O
.mdst-sup E = mc2, see note1
Block Elements
Class Example
.mdst-blockquote
A quoted passage of text.
.mdst-hr
.mdst-hr--flush
Lists
Class Example
.mdst-ul
.mdst-li
  • Unordered item
  • Another item
.mdst-ol
.mdst-li
  1. First item
  2. Second item
.mdst-ul--unstyled
  • No bullets
  • No padding
Usage
<!-- Headings -->
<h1 class="mdst-h1">Heading 1</h1>
<h2 class="mdst-h2">Heading 2</h2>

<!-- Paragraph -->
<p class="mdst-p">Default paragraph.</p>
<p class="mdst-p mdst-p--muted">Muted text.</p>

<!-- Inline -->
<a href="#" class="mdst-a">Link</a>
<strong class="mdst-strong">Bold</strong>
<em class="mdst-em">Italic</em>
<mark class="mdst-mark">Highlight</mark>
<kbd class="mdst-kbd">Ctrl</kbd> + <kbd class="mdst-kbd">K</kbd>
<abbr title="Cascading Style Sheets">CSS</abbr>
<del>Removed</del> <ins>Added</ins>
<s>£40</s> £32
<cite>The Elements of Style</cite>
<samp>File saved.</samp> <var>w</var>
H<sub>2</sub>O  mc<sup>2</sup>

<!-- Blockquote -->
<blockquote class="mdst-blockquote">Quote</blockquote>

<!-- Horizontal rule -->
<hr class="mdst-hr" />
<hr class="mdst-hr mdst-hr--flush" />

<!-- Lists -->
<ul class="mdst-ul">
  <li class="mdst-li">Item</li>
</ul>