Source: _1-atoms/_text-formatting.scss, line 1

2.1 Text formatting

Source: _1-atoms/_text-formatting.scss, line 5

2.1.1 Strong / Bold

Example

This is Bold and this is Strong text.

This is <b>Bold</b> and this is <strong>Strong</strong> text.

Source: _1-atoms/_text-formatting.scss, line 23

2.1.2 Mark

Example

This is some marked text.

This is some <mark class="">marked</mark> text.

Source: _1-atoms/_text-formatting.scss, line 34

2.1.3 Blockquote

Example

This is some block quoted text.

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.

Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«.

<blockquote>
    <p>
        This is some block quoted text.
    </p>
</blockquote>

<blockquote>
    <p>
        Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.
    </p>
    <p>
        Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«.
    </p>
</blockquote>

Source: _1-atoms/_lists.scss, line 1

2.2 Lists

Source: _1-atoms/_lists.scss, line 5

2.2.1 Unordered list

Example

List item 1
List item 2

Nested list item 1
Nested list item 2
Nested list item 3

List item 3

<ul class="unordered-list">
    <li class="unordered-list__item">List item 1</li>
    <li class="unordered-list__item">List item 2</li>
    <ul class="unordered-list">
        <li class="unordered-list__item">Nested list item 1</li>
        <li class="unordered-list__item">Nested list item 2</li>
        <li class="unordered-list__item">Nested list item 3</li>
    </ul>
    <li class="unordered-list__item">List item 3</li>
</ul>

Source: _1-atoms/_lists.scss, line 23

2.2.2 Ordered list

Example

List item 1
List item 2

Nested list item 1
Nested list item 2
Nested list item 3

List item 3

<ol class="ordered-list">
    <li class="ordered-list__item">List item 1</li>
    <li class="ordered-list__item">List item 2</li>
    <ol class="ordered-list">
        <li class="ordered-list__item">Nested list item 1</li>
        <li class="ordered-list__item">Nested list item 2</li>
        <li class="ordered-list__item">Nested list item 3</li>
    </ol>
    <li class="ordered-list__item">List item 3</li>
</ol>