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-semibold or .semibold Semibold text.

.font-weight-medium or .medium Medium weight text.

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

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

Numeric font-weight classes

CSS classes are available for the full 100–900 numeric scale. Use these when you need a specific weight value not covered by the named classes above.

.font-weight-100 Thin (100)

.font-weight-200 Extra Light (200)

.font-weight-300 Light (300)

.font-weight-400 Normal (400)

.font-weight-500 Medium (500)

.font-weight-600 Semi Bold (600)

.font-weight-700 Bold (700)

.font-weight-800 Extra Bold (800)

.font-weight-900 Black (900)

Font style

Helper classes for controlling the font style of an element.

.font-style-italic Italic text.

.font-style-normal Normal style text.

Line height

Helper classes for controlling the line height of an element. These use the design system's standard line-height scale.

This text uses the tightest line height (no extra additional spacing). .lh-1 — Use for single-line text or tightly packed labels where vertical rhythm is not a concern.

This text uses the extra-small line height scale value. .lh-xs — Use for compact UI elements such as badges, chips, or condensed table cells.

This text uses the small line height scale value. .lh-sm — Use for smaller body text or secondary descriptions that need a slightly tighter feel.

This text uses the medium line height scale value. .lh-md — The default body text line height. Use when you need to explicitly set the standard reading rhythm.

This text uses the large line height scale value. .lh-lg — Use for larger paragraphs or content areas where improved readability is desired.

This text uses the extra-large line height scale value. .lh-xl — Use for spacious text blocks, pull quotes, or introductory paragraphs.

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-inter The font used for this paragraph is Inter. Unless stated otherwise, this is the font you should use.

.font-family-spiris Spiris Räksmörgås

.font-family-spiris.bold,
.font-family-spiris.font-weight-bold Spiris Räksmörgås

.font-family-open-sans The font used for this paragraph is Open Sans. Deprecated: This class now applies the Inter font, not Open Sans. It will be removed in a future release.

.font-family-ubuntu The font used for this paragraph is Ubuntu. Deprecated: This class now applies the Inter font, not Ubuntu. It will be removed in a future release.

.font-family-ubuntu-light The font used for this paragraph is Ubuntu Light. Deprecated: This class now applies the Inter font, not Ubuntu Light. It will be removed in a future release.

.font-family-ubuntu-semibold The font used for this paragraph is Ubuntu Semibold. Deprecated: This class now applies the Inter font, not Ubuntu Semibold. It will be removed in a future release.

.font-family-ubuntu-bold The font used for this paragraph is Ubuntu Bold. Deprecated: This class now applies the Inter font, not Ubuntu Bold. It will be removed in a future release.

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.