Typography

Contextual colors

Apply a specific colour on your text by using one of the classes from the examples below.

.text-default Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

.text-primary Nullam id dolor id nibh ultricies vehicula ut id elit.

.text-secondary Nullam nisi erat porttitor ligula vehicula ut id.

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

.text-success Dapibus cursus commodo, tortor mauris nibh amet non magna.

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

.text-warning Nullam id dolor id nibh ultricies vehicula ut id elit.

					

<p class="text-default"> ... </p>


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


<p class="text-secondary"> ... </p>


<p class="text-disabled"> ... </p>


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


<p class="text-error"> ... </p>


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

Dealing with specificity! Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <span> with the class.

Alignments

Easily re-align text to components with text alignment classes.

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

`.text-left` or `.text-{xs,sm,md,lg,xl,xxl}-left`	`text-align: left;`
`.text-center` or `.text-{xs,sm,md,lg,xl,xxl}-center`	`text-align: center;`
`.text-right` or `.text-{xs,sm,md,lg,xl,xxl}-right`	`text-align: right;`
`.text-justify` or `.text-{xs,sm,md,lg,xl,xxl}-justify`	`text-align: justify;`

.text-left Left aligned text on all viewport sizes.

.text-center Center aligned text on all viewport sizes.

.text-right Right aligned text on all viewport sizes.

.text-justify This is a long paragraph written to show how the 'text-justify' class affect it. Classes are applied to the element itself. Nullam id dolor_id nibh_ultricies_vehicula ut id elit. This is a long paragraph written to show how the 'text-justify' class affect it. Classes are applied to the element itself. Nullam id dolor_id nibh_ultricies_vehicula ut id elit.

.text-sm-right Right aligned text on viewports sized SM (small) or wider.

.text-xxl-right Right aligned text on viewports sized XXL or wider.

					

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


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


<p class="text-justify">This is a long paragraph written to show how the 'text-justify' class affect it.</p>


<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>


<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

Text decoration

Helper classes for controlling the decoration of text.

.text-underline Underline text

.text-line-through Text with line through

.text-no-underline 'a' element without underline

					

<p class="text-underline">Underline text.</p>


<p class="text-line-through">Text with line through.</p>


<a class="text-no-underline">'a' element without underline</a>

Text overflow

Prevent text from wrapping with a .text-nowrap class.

.text-nowrap

This text should overflow the parent.

					

<p class="text-nowrap bg-default border" style="width: 120px;">This text should overflow the parent.</p>

For longer text you can add extension points by adding .text-truncate class. Requires display: inline-block or display: block.

Also you have the option to add helper classes to truncate the text not only for one row, but for 2,3 or 4 rows. Check out the example below.

.text-truncate

This text should have maximum 1 row and if longer ellipsis will appear.

.text-truncate-2

This text should have maximum 2 rows and if longer ellipsis will appear.

.text-truncate-3

This text should have maximum 3 rows and if longer ellipsis will appear.

.text-truncate-4

This text should have a maximum of 4 rows and if longer ellipsis will appear and you won't see the end of this sentence.

					

<p class="text-truncate">...</p>


<p class="text-truncate-2">...</p>


<p class="text-truncate-3">...</p>


<p class="text-truncate-4">...</p>

Text transform

Transform text in components with text transform classes. You can use any ot this classes: text-lowercase, text-uppercase or text-capitalize

.text-lowercase Lowercased text

.text-uppercase Uppercased text

.text-capitalize capitalized text

					

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


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


<p class="text-capitalize">Capitalized text</p>

Use the clasees below to enable additional fractions (sans-serif support it) or ordinal markers (monospace support it), in fonts that support them (the Open Sans and Ubuntu, for the moment doesn't support it).

.text-numeric-normal reset the 'font-variant-numeric' propriety

.text-numeric-ordinal 1th, 2nd, 3rd ...

.text-numeric-diagonal-fractions 2/3 , 3/7 , 7/19

					

<span class="text-numeric-ordinal">1th, 2nd, 3rd ...</span>


<span class="text-numeric-diagonal-fractions">2/3, 3/7, 7/19</span>

Font weight

Helper classes for controlling the font weight of an element.

.font-weight-bold or .bold Bold text.

.font-weight-normal or .normal Normal weight text.

.font-weight-light or .light Light weight text.

					

<p class="bold">Bold text</p>


<p class="normal">Normal weight text</p>


<p class="light">Light weight text</p>

Font family

Helper classes for controlling the font family of an element. In VUD we have only 2 types of fonts: Open Sans (default type - that is used in the body) and Ubuntu (used for branding and some types of headings).

.font-family-open-sans The font used for this paragraph is Open Sans.

.font-family-ubuntu The font used for this paragraph is Ubuntu.

.font-family-ubuntu-light The font used for this paragraph is Ubuntu Light.

.font-family-ubuntu-semibold The font used for this paragraph is Ubuntu Semibold.

.font-family-ubuntu-bold The font used for this paragraph is Ubuntu Bold.

					

<p class="font-family-open-sans">The font used for this paragraph is Open Sans.</p>


<p class="font-family-ubuntu">The font used for this paragraph is Ubuntu.</p>