Typography
Contextual colors
Apply a specific colour on your text by using on of this classes: .text-default, .text-primary, .text-disabled, .text-error, .text-warning
.text-default Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
.text-primary Nullam id dolor id nibh ultricies vehicula ut id elit.
.text-disabled Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
.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 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 Bold text.
.font-weight-normal Normal weight text.
.font-weight-light Light weight text.
Font family
Helper classes for controlling the font family of an element. In Nordic Cool 4 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.
<!-- Contextual colors -->
<p class="text-default"> ... </p>
<p class="text-primary"> ... </p>
<p class="text-disabled"> ... </p>
<p class="text-error"> ... </p>
<p class="text-warning"> ... </p>
<!-- Alignments -->
<p class="text-left">Left aligned text on all viewport sizes.</p>
<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-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
<!-- Text decoration -->
<p class="text-underline">Underline text.</p>
<p class="text-line-through">Text with line through.</p>
<!-- Text overflow - .text-nowrap -->
<p class="text-nowrap bg-default border" style="width: 120px;">This text should overflow the parent.</p>
<!-- Truncate text - .text-truncate -->
<p class="text-truncate" style="max-width: 150px;">This text should have maximum 1 row and if longer ellipsis will appear.</p>
<p class="text-truncate-2" style="max-width: 150px;">This text should have maximum 2 rows and if longer ellipsis will appear.</p>
<p class="text-truncate-3" style="max-width: 150px;">This text should have maximum 3 rows and if longer ellipsis will appear.</p>
<p class="text-truncate-4" style="max-width: 150px;">This text should have maximum 4 rows and if longer ellipsis will appear.</p>
<!-- Text transform -->
<p class="text-lowercase">Lowercased text</p>
<p class="text-uppercase">Uppercased text</p>
<p class="text-capitalize">Capitalized text</p>
<span class="text-numeric-ordinal">1th, 2nd, 3rd ...</span>
<span class="text-numeric-diagonal-fractions">2/3, 3/7, 7/19</span>
<!-- Font weight -->
<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 -->
<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>