Text Utilities

  1. Home
  2. Content
  3. Text Utilities
ChatEmailCalendar

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-capitalizeonly 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.

.markand .smallclasses 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 highlighttext. 

                                <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 HTMLtitle. 

                                <p> Sample <abbr title="HyperText Markup Language" class="initialism">HTML.</abbr></p>
y= mx+ b 
                                <p> For indicating variables use the <var> tag.</p>

Edit settings, pressctrl+ , 

                                <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>