Document text utility classes.

website/docs/utilities/text.mdx

@@ -0,0 +1,62 @@
+# Text
+
+## Alignment
+
+```html
+<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
+
+```html
+<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
+
+```html
+<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
+
+```html
+<p class="text--italic">Italic Text</p>
+```
+
+## No Decoration
+
+```html
+<p class="text--no-decoration">Text with no decoration</p>
+```
+
+## Transform
+
+```html
+<p class="text--uppercase">uppercase text</p>
+<p class="text--lowercase">LOWERCASE TEXT</p>
+<p class="text--capitalize">capitalize text</p>
+```
+
+## Truncate
+
+```html
+<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
+
+```html
+<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>
+```