Text
Alignment
Left aligned text
Center aligned text
Right aligned text
Justified text
<p class="text--left">Left aligned text</p>
<p class="text--center">Center aligned text</p>
<p class="text--right">Right aligned text</p>
<p class="text--justify">Justified text</p>
Break
This is a very long text that will break into multiple lines if there is not enough space to display it in a single line on the screen. Specifically, this text will break at the a word boundary so it will not break in the middle of a word.
<p class="text--break">
This is a very long text that will break into multiple lines if there is not
enough space to display it in a single line on the screen. Specifically, this
text will break at the a word boundary so it will not break in the middle of a
word.
</p>
Color
Primary Text
Secondary Text
Success Text
Info Text
Warning Text
Danger Text
<p class="text--primary">Primary Text</p>
<p class="text--secondary">Secondary Text</p>
<p class="text--success">Success Text</p>
<p class="text--info">Info Text</p>
<p class="text--warning">Warning Text</p>
<p class="text--danger">Danger Text</p>
Italic
Italic Text
<p class="text--italic">Italic Text</p>
No Decoration
Text with no decoration
<p class="text--no-decoration">Text with no decoration</p>
Transform
uppercase text
LOWERCASE TEXT
capitalize text
<p class="text--uppercase">uppercase text</p>
<p class="text--lowercase">LOWERCASE TEXT</p>
<p class="text--capitalize">capitalize text</p>
Truncate
This is a very long text that will be truncated if there is not enough space to display it in a single line on the screen. It's truncated by adding an ellipsis at the end of the text.
<p class="text--truncate">
This is a very long text that will be truncated if there is not enough space
to display it in a single line on the screen. It's truncated by adding an
ellipsis at the end of the text.
</p>
Weight
Bold Text
Semibold Text
Normal Text
Light Text
<p class="text--bold">Bold Text</p>
<p class="text--semibold">Semibold Text</p>
<p class="text--normal">Normal Text</p>
<p class="text--light">Light Text</p>