- ###### Files

- Two new item submitted

  Marketing Manager
  '17kb

- 52 JPG file Generated

  FontEnd Developer
  '11kb

- 25 PDF File Uploaded

  Digital Marketing Manager
  '150kb

- Anna_Strong.doc

  Web Designer
  '256kb

- ###### Members

- John Doe

  UI designer

- Michal Clark

  FontEnd Developer

- Milena Gibson

  Digital Marketing Manager

- Anna Strong

  Web Designer

- No results found.

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

Vuexy 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

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