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>