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 |
Block Elements
| Class | Example |
|---|---|
| .mdst-blockquote |
A quoted passage of text. |
| .mdst-hr |
|
| .mdst-hr--flush |
|
Lists
| Class | Example |
|---|---|
|
.mdst-ul .mdst-li |
|
|
.mdst-ol .mdst-li |
|
| .mdst-ul--unstyled |
|
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>
<!-- 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>