<!-- Default -->
<p class="no">
    Text with no Transform</p>

<!-- Uppercase -->
<p class="uppercase">
    Text with uppercase Transform</p>

<!-- Capitalise -->
<p class="capitalise">
    Text with capitalise Transform</p>

<!-- Lowercase -->
<p class="lowercase">
    Text with lowercase Transform</p>

<!-- Underline -->
<p class="underline">
    Text with underline Transform</p>

<!-- Small Text -->
<p class="small-text">
    Text with small-text Transform</p>

<!-- Smaller Text -->
<p class="smaller-text">
    Text with smaller-text Transform</p>

<!-- Large Text -->
<p class="large-text">
    Text with large-text Transform</p>

<!-- Larger Text -->
<p class="larger-text">
    Text with larger-text Transform</p>

<!-- Heavy Text -->
<p class="heavy-text">
    Text with heavy-text Transform</p>

<!-- Light Text -->
<p class="light-text">
    Text with light-text Transform</p>

<!-- Indent -->
<p class="indent">
    Text with indent Transform</p>

<!-- Caption -->
<p class="caption">
    Text with caption Transform</p>

<p class="{{ modifier }}">Text with {{ modifier }} Transform</p>

Text can be modified by applying the following classes. These should be only applied for aesthetic reasons - and not when content should be presented in specific ways (especially for Uppercase and Capitalised text).