Rte Sample

<!-- RTE elements -->

<!-- headlines -->
<h2 class="u-typo:xl">RTE Headline (H2)</h2>

<h3 class="u-typo:l">RTE Headline (H3)</h3>

<h4 class="u-typo:m">RTE Headline (H4)</h4>

<h4 class="u-typo:m o-icons--before o-icons o-icons--caution">
    RTE Headline (H4)
</h4>
<br>

<h4 class="u-typo:m o-icons--before o-icons o-icons--faq">
    RTE Headline (H4)
</h4>
<br>

<h4 class="u-typo:m o-icons--before o-icons o-icons--info">
    RTE Headline (H4)
</h4>
<br>

<!-- elements -->
<p><strong>Strong is used to indicate strong importance</strong></p>

<p><em>This text has added emphasis</em></p>

<p>The <b>b element</b> is stylistically different text from normal text, without any special importance</p>

<p>The <i>i element</i> is text that is set off from the normal text</p>

<p><s>This text has a strikethrough</s></p>

<p>Superscript<sup>®</sup></p>

<p>Subscript for things like H<sub>2</sub>O</p>

<p><small>This small text is small for for fine print etc</small></p>

<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>

<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>

<p><cite>This is a citation</cite></p>

<p>The <dfn>dfn element</dfn> indicates a definition</p>

<p>The <mark class="u-color-bg:tertiary">mark element</mark> indicates a highlight</p>

<hr>

<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum
    volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>

<!-- link buttons -->
<p><a href="#" class="c-link-button c-button--primary">Link button</a>
</p>

<p><a href="#" class="c-link-button c-button--ghost">Link button</a>
</p>

<!-- link inline -->
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus. Lorem ipsum dolor <a href="#" class="c-link">this is an inline link</a>    sit amet.</p>

<!-- link icons -->
<p>

    <a href="#" class="c-link c-link--with-icon o-icons--before o-icons o-icons--arrow-right">Link arrow-right</a>

</p>

<p>

    <a href="#" class="c-link c-link--with-icon o-icons--before o-icons o-icons--caution">Link caution</a>

    <br>

    <a href="#" class="c-link c-link--with-icon o-icons--before o-icons o-icons--download" title="Startet Datei Download" download>Link download</a>

    <br>

    <a href="mailto:dev@example.org" class="c-link c-link--with-icon o-icons--before o-icons o-icons--email" title="Öffnet E-Mail">Link email</a>

    <br>

    <a href="#" class="c-link c-link--with-icon o-icons--before o-icons o-icons--extern" title="Öffnet externen Link in neuem Fenster" target="_blank">Link extern</a>

    <br>

    <a href="#" class="c-link c-link--with-icon o-icons--before o-icons o-icons--intern" title="Öffnet internen Link in neuem Fenster">Link intern</a>

</p>

<!-- text icons -->
<p>

    <span class="o-icons--before o-icons o-icons--caution">
            Text caution
        </span>

    <br>

    <span class="o-icons--before o-icons o-icons--faq">
            Text faq
        </span>

    <br>

    <span class="o-icons--before o-icons o-icons--info">
            Text info
        </span>

    <br>
</p>

<!-- lists -->
<ol class="c-list c-list--ordered">
    <li>
        This is a list item in an ordered list
    </li>
    <li>
        An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
    </li>
    <li>
        Lists can be nested inside of each other
        <ol>
            <li>
                This is a nested list item
            </li>
            <li>
                This is another nested list item in an ordered list
            </li>
        </ol>
    </li>
    <li>
        This is the last list item
    </li>
</ol>

<ul class="c-list c-list--unordered">
    <li>
        This is a list item in an unordered list
    </li>
    <li>
        An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
    </li>
    <li>
        Lists can be nested inside of each other
        <ul>
            <li>
                This is a nested list item
            </li>
            <li>
                This is another nested list item in an unordered list
            </li>
        </ul>
    </li>
    <li>
        This is the last list item
    </li>
</ul>