#### Appearance - Text Styling

Statistics Invoices Schedule

##### 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 | Description
--- | ---
This is a muted text | For muted text color use `.text-muted` class
This is a primary text | For primary text color use `.text-primary` class
This is a danger text | For danger text color use `.text-danger` class
This is a success text | For success text color use `.text-success` class
This is a warning text | For warning text color use `.text-warning` class
This is a info text | For info text color use `.text-info` class

##### Contextual backgrounds

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.

Example | Description
--- | ---
Primary background | For primary background color use `.bg-primary` class
Danger background | For danger background color use `.bg-danger` class
Success background | For success background color use `.bg-success` class
Warning background | For warning background color use `.bg-warning` class
Info background | For info background color use `.bg-info` class
Custom background | For a custom background color use `.bg-*` class

##### Text options

Limitless template supports the majority of all possible text styling options - weights, sizes, styles and additional elements such as marks, abbreviations, keyboard inputs, sample and variable inputs etc. All these stylings can be applied any section heading, form components, content and UI elements just by adding proper class to the element. Basic text styles are included to BS framework by default, Limitless includes more extended typography.

Example | Description
--- | ---
Links
This is a default link | Default style for `<a>` element
This is a text color link | To use a link with default text color link, add `.text-default` class
This is a contextual color link | To use a link with contextual color link, add `.text-danger` or any other contextual class
This is a custom color link | To use a link with custom color link, add `.text-teal` or any other text color class
Font weight
This is a thin text | For thin font weight use `.text-thin` class
This is a light text | For light font weight use `.text-light` class
This is a regular text | For forced regular font weight use `.text-regular` class
This is a semibold text | For semibold font weight use `.text-semibold` class
This is a bold text | For bold font weight use `.text-bold` class
This is a black text | For black font weight use `.text-black` class
Font style
This is an italic text | For italic font style use `<em>` tag
This is an uppercase text | For uppercase text transformation use `.text-uppercase` class
This is a lowercase text | For lowercase text transformation use `.text-lowercase` class
This is a capitalized text | For capitalize text transformation use `.text-capitalize` class
This is a deleted text | For indicating blocks of text that have been deleted use the `<del>` tag.
This is a strikethrough text | For indicating blocks of text that are no longer relevant use the `<s>` tag.
This is an underlined text | To underline text use the `<u>` tag.
Font size
This is a larger text size | For larger text size use `.text-size-large` class
This is a default text size | Default font size is `13px`, doesn;t require any special classes
This is a smaller text size | For smaller text size use `.text-size-small` class
This is a mini text size | For mini text size use `.text-size-mini` class
Text elements
This is a highlighted text | For text highlighting in another context, use the `<mark>` tag
This is a inserted text | For indicating additions to the document use the `<ins>` tag
Basic abbreviation | For expanded text on abbr hover, use the `<abbr>` element
Abbreviation with initialism | Add `.initialism` to an abbreviation for a slightly smaller font-size
Press `ctrl + ,` to edit | Use the `<kbd>` to indicate input that is typically entered via keyboard
y = m x + b | Use the `<var>` to indicate variables
`This is a sample text` | Use the `<samp>` to indicate blocks sample output from a program
`Inline code snippet` | Wrap inline snippets of code with `<code>`
Text alignment
Left aligned text | For left text alignment, use `.text-left` alignment class
Centered text | For center text alignment, use `.text-center` alignment class
Right aligned text | For right text alignment, use `.text-right` alignment class
Justified text | For justified text, use `.text-justify` alignment class
No wrap text | For no wrap text, use `.text-nowrap` alignment class