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
<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 Bold text.
.font-weight-normal Normal weight text.
.font-weight-light Light weight text.
<p class="font-weight-bold">Bold text</p>
<p class="font-weight-normal">Normal weight text</p>
<p class="font-weight-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.
<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>