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
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>
Font size
Helper classes for controlling the font size of an element.
.font-13
The font used for this paragraph is 13px (1.3rem).
.font-14
The font used for this paragraph is 14px (1.4rem).
.font-16
The font used for this paragraph is 16px (1.6rem).
.font-20
The font used for this paragraph is 20px (2rem).
.font-24
The font used for this paragraph is 20px (2.4em).
.font-32
The font used for this paragraph is 32px (3.2rem).
.font-48
The font used for this paragraph is 48px (4.8rem).
<p class="font-14">The font used for this paragraph is Open Sans.</p>
More complex example
The font used for this paragraph has 20px, the font family is Ubuntu Semibold, is uppercased, has underline, uses a primary color and it's truncated.
<p class="font-20 font-family-ubuntu-semibold text-uppercase text-truncate text-underline text-center text-primary w-100">The font used for this paragraph has 20px, the font family is Ubuntu Semibold, is uppercased, has underline, uses a primary color and it's truncated.</p>