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.

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.

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

Text overflow

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

.text-nowrap
This text should overflow the parent.

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.

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

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

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.

Font family

Helper classes for controlling the font family of an element. In the Design System 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.

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).

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.