Skip to main content

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>