<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<p>This a common paragraph. Lesser divided saw yielding stars wherein. Void fly forth you'll bring. Divide creeping. Subdue third female shall them she'd she'd isn't fourth.</p>
<p>This a common paragraph. Lesser divided saw yielding stars wherein. Void fly forth you'll bring. Divide creeping. Subdue third female shall them she'd she'd isn't fourth.</p>

<strong>Emphasize in bold</strong><br />
<em>Emphasize in cursive</em><br />
<small>Small text</small><br />
<a href="#">Normal link</a><br />
<abbr title="HyperText Markup Language">HTML</abbr>

<p class="text-success">Success</p>
<p class="text-warning">Warning</p>
<p class="text-danger">Danger or error</p>
<p class="text-muted">Muted</p>

<ul>
    <li>One</li>
    <li>Two
        <ul>
            <li>Two Point One</li>
            <li>Two Point Three</li>
        </ul>
    </li>
    <li>Three</li>
    <li>Four</li>
</ul>
<ol>
    <li>One</li>
    <li>Two</li>
    <li>Three
        <ol>
            <li>Three.One</li>
            <li>Three.Two</li>
        </ol>
    </li>
    <li>Four</li>
</ol>

<ul class="list-unstyled">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>

<h3>Inline list</h3>
    <ul class="list-inline">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>

<dl>
    <dt>Defintion title</dt>
    <dd>Definition text</dd>
    <dt>Defintion title</dt>
    <dd>Definition text</dd>
</dl>

<p class="text-left">Text left</p>
<p class="text-center">Text center</p>
<p class="text-right">Text right</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">This text will never wrap to a new line.</p>
<p class="text-wrap">This text will always wrap to a new line (it is default behavior but sometimes - if you want to override 'nowrap' behavior - it may be useful).</p>

<script>
    window.addEventListener('DOMContentLoaded', () => {
        const icons = window.iconList || [];
        const container = document.getElementById('iconset-container');
        const iconsListItems = icons.map(icon => {
            return `<li>
                <span class="icon icon--${icon}" aria-hidden="true"></span>
                <p><a href="dist/images/icons/${icon}.svg" download>${icon}</a></p>
            </li>`;
        });
        container.innerHTML = `<ul class="iconset">${iconsListItems.join('')}</ul>`;
    });
</script>
<div id="iconset-container">
    <!-- Content is generated by javascript above. -->
</div>

<span class="icon icon--candidate {$modifiers}" aria-hidden="true"></span>

<p><span class="icon icon--candidate icon--left" aria-hidden="true"></span> John Doe</p>
<p>John Doe <span class="icon icon--candidate icon--right" aria-hidden="true"></span></p>
<p><span class="icon icon--candidate icon--left icon--large icon--middle" aria-hidden="true"></span> Vijay Kumar</p>