#### Contextual colors

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

Example | Classes | Snippet
--- | --- | ---

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

`.text-muted`

                                    <p class="text-muted">Your Text.</p>

Nullam id dolor id nibh ultricies vehicula ut id elit.

`.text-primary`

                                    <p class="text-primary">Your Text.</p>

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

`.text-success`

                                    <p class="text-success">Your Text.</p>

Maecenas sed diam eget risus varius blandit sit amet non magna.

`.text-info`

                                    <p class="text-info">Your Text.</p>

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

`.text-warning`

                                    <p class="text-warning">Your Text.</p>

Donec ullamcorper nulla non metus auctor fringilla.

`.text-danger`

                                    <p class="text-danger">Your Text.</p>

You can also use text lighten, darken and accent classes.

- `.{colorName} .lighten-*` For lighten text color, this two classes needed. Here *: 1,2,3,4 for lighten color options.
- `.{colorName} .darken-*` For darken text color, this two classes needed. Here *: 1,2,3,4 for darken color options.
- `.{colorName} .accent-*` For accent text color, this two classes needed. Here *: 1,2,3,4 for accent color options.

#### Text alignment

Easily realign text to components with text alignment classes.

Example | Classes | Snippet
--- | --- | ---

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

`.text-justify`

                                    <p class="text-justify">Justified text.</p>

It is a long established fact that a reader.

`.text-nowrap`

                                    <p class="text-nowrap">No wrap text.</p>

For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.

Example | Classes | Snippet
--- | --- | ---

Left aligned text on all viewport sizes.

`.text-left`

                                    <p class="text-left">Left aligned text on all viewport sizes.</p>

Center aligned text on all viewport sizes.

`.text-center`

                                    <p class="text-center">Center aligned text on all viewport sizes.</p>

Right aligned text on all viewport sizes.

`.text-right`

                                    <p class="text-right">Right aligned text on all viewport sizes.</p>

Left aligned text on viewports sized SM or wider.

`.text-{sm/md/lg/xl}-left`

                                    <p class="text-{sm/md/lg/xl}-left">Left aligned text on viewports sized SM/MD/LG/XL or wider.</p>

Center aligned text on viewports sized SM or wider.

`.text-{sm/md/lg/xl}-center`

                                    <p class="text-{sm/md/lg/xl}-center">Center aligned text on viewports sized SM/MD/LG/XL or wider.</p>

Right aligned text on viewports sized SM or wider.

`.text-{sm/md/lg/xl}-right`

                                    <p class="text-{sm/md/lg/xl}-right">Right aligned text on viewports sized SM/MD/LG/XL or wider.</p>

#### Text transform

Transform text in components with text capitalization classes.

Note how `text-capitalize` only changes the first letter of each word, leaving the case of any other letters unaffected.

Example | Classes | Snippet
--- | --- | ---

Lowercased text.

`.text-lowercase`

                                    <p class="text-lowercase">Lowercased text.</p>

Uppercased text.

`.text-uppercase`

                                    <p class="text-uppercase">Uppercased text.</p>

CapiTaliZed text.

`.text-capitalize`

                                    <p class="text-capitalize">CapiTaliZed text.</p>

#### Text option

##### Font size

Vuesax Admin provide font large & small sizes variant classes to change font size.

Example | Classes | Snippet
--- | --- | ---

Large lg text size.

`.font-large-3`

                                    <p class="font-large-3" >Large lg text size.</p>

Large lg text size.

`.font-large-2`

                                    <p class="font-large-2" >Large lg text size.</p>

Large lg text size.

`.font-large-1`

                                    <p class="font-large-1" >Large lg text size.</p>

Large md text size.

`.font-medium-3`

                                    <p class="font-medium-3" >Large md text size.</p>

Large md text size.

`.font-medium-2`

                                    <p class="font-medium-2" >Large md text size.</p>

Large sm text size.

`.font-medium-1`

                                    <p class="font-medium-1" >Large sm text size.</p>

Normal base text size.

N/A

                                    <p>Normal base text size.</p>

Small lg text size.

`.font-small-3`

                                    <p class="font-small-3" >Small lg text size.</p>

Small md text size.

`.font-small-2`

                                    <p class="font-small-2" >Small md text size.</p>

Small sm text size.

`.font-small-1`

                                    <p class="font-small-1" >Small sm text size.</p>

##### Font weight

Vuesax Admin provide font weight class `.text-bold-{weight}`, where `{weight} value can be 300, 400, 500, 600, 700.`

Example | Classes | Snippet
--- | --- | ---

Font weight 300

`.text-bold-300`

                                    <p class="text-bold-300">Font weight 300.</p>

Font weight 400

`.text-bold-400`

                                    <p class="text-bold-400">Font weight 400.</p>

Font weight 600

`.text-bold-600`

                                    <p class="text-bold-600">Font weight 600.</p>

Font weight 700

`.text-bold-700`

                                    <p class="text-bold-700">Font weight 700.</p>

##### Inline text elements

Styling for common inline HTML5 elements.

`.mark` and `.small` classes are also available to apply the same styles as `<mark>` and `<small>` while avoiding any unwanted semantic implications that the tags would bring.

While not shown above, feel free to use `<b>` and `<i>` in HTML5. `<b>` is meant to highlight words or phrases without conveying additional importance while `<i>` is mostly for voice, technical terms, etc.

Example | Snippet
--- | ---

You can use the mark tag to highlight text.

                                    <p>You can use the mark tag to <mark>highlight</mark> text.</p>

This line of text is meant to be treated as deleted text.

                                    <p><del>This line of text is meant to be treated as deleted text.</del></p>

This line of text is meant to be treated as no longer accurate.

                                    <p><s>This line of text is meant to be treated as no longer accurate.</s></p>

This line of text is meant to be treated as an addition to the document.

                                    <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>

This line of text will render as underlined

                                    <p><u>This line of text will render as underlined.</u></p>

This line of text is meant to be treated as fine print.

                                    <p><small>This line of text is meant to be treated as fine print.</small></p>

This line rendered as bold text.

                                    <p><strong>This line rendered as bold text.</strong></p>

This line rendered as italicized text.

                                    <p><em>This line rendered as italicized text.</em></p>

Sample abbreviation

                                    <p> Sample <abbr>Abbreviations.</abbr></p>

Sample HTML title.

                                    <p> Sample <abbr title="HyperText Markup Language" class="initialism">HTML.</abbr></p>

y = m x + b

                                    <p> For indicating variables use the <var> tag.</p>

Edit settings, press ``ctrl` + `,``

                                    <p> Use the <kbd>  to indicate input that is typically entered via keyboard.</p>

`This text is meant to be treated as sample output from a computer program.`

                                    <p> For indicating sample output from a program use the  <samp>  tag. </p>

`Inline code snippet`

                                    <p> Wrap inline snippets of code with <code> tag. </p>