Text

Basic modifiers for text size and weight use the names demonstrated below with each example. Disabled by default, enable with $enable-text: true; in the _configuration.scss document.

Font sizes (anchor)

.h1

The quick brown fox jumps over the lazy dog.

.h2

The quick brown fox jumps over the lazy dog.

.h3

The quick brown fox jumps over the lazy dog.

.h4

The quick brown fox jumps over the lazy dog.

.h5

The quick brown fox jumps over the lazy dog.

.h6

The quick brown fox jumps over the lazy dog.

.fs-xl

The quick brown fox jumps over the lazy dog.

.fs-lg

The quick brown fox jumps over the lazy dog.

.fs-body

The quick brown fox jumps over the lazy dog.

.fs-sm

The quick brown fox jumps over the lazy dog.

.fs-xs

The quick brown fox jumps over the lazy dog.

.fs-xxs

The quick brown fox jumps over the lazy dog.

Font weights (anchor)

The availability of the font weight utilities is dependent on the presence of matching font weights in the chosen font family used. As demonstrated below (when viewing on Windows) some weights look the same as there is no corresponding font weight included with the default system fonts included with the typography styles

.fw-100

The quick brown fox jumps over the lazy dog.

.fw-200

The quick brown fox jumps over the lazy dog.

.fw-300

The quick brown fox jumps over the lazy dog.

.fw-400

The quick brown fox jumps over the lazy dog.

.fw-500

The quick brown fox jumps over the lazy dog.

.fw-600

The quick brown fox jumps over the lazy dog.

.fw-700

The quick brown fox jumps over the lazy dog.

.fw-800

The quick brown fox jumps over the lazy dog.

.fw-900

The quick brown fox jumps over the lazy dog.

Line heights (anchor)

All line-heights can be customized with inline styles using the --lh variable included on the body styles as follows:

<p style="--lh: 1.15;">

The quick brown fox jumped over the lazy dog to leverage agile frameworks for high level overviews.

The three line-height utility classes available use the default line-heights provided as variables for the body, headings and buttons and forms.

<p class="lh-body">

The quick brown fox jumped over the lazy dog to leverage agile frameworks for high level overviews.

<p class="lh-btn-forms">

The quick brown fox jumped over the lazy dog to leverage agile frameworks for high level overviews.

<p class="lh-heading">

The quick brown fox jumped over the lazy dog to leverage agile frameworks for high level overviews.

Letter and word spacing (anchor)

The .text-spacing utility is a customizable class that includes letter-spacing and word-spacing properties that use variables with no preset values provided for adjusting letter and word spacing on-the-fly in inline styles.

<p class="text-spacing" style="--ls: .1em;">

The quick brown fox jumped over the lazy dog

<p class="text-spacing" style="--ws: .25em;">

The quick brown fox jumped over the lazy dog

Text wrap (anchor)

The text-wrap property is applied to global elements using the --tw variable and is by default set to pretty to remove typographical widows/orphans from text content. The examples are all given a 19rem width to demonstrate the style.

<p>

The quick brown fox jumped over the lazy dog.

<p style="--tw: initial;">

The quick brown fox jumped over the lazy dog.

A .text-balance utility is available to use the balance value with the property or if not enabled the value can also be changed using the variable as described.

<p class="text-balance;">

The quick brown fox jumped over the lazy dog.

<p style="--tw: balance;">

The quick brown fox jumped over the lazy dog.

Text alignment (anchor)

.text-left

The quick brown fox.

.text-center

The quick brown fox.

.text-right

The quick brown fox.

.link-light .link-dark

Mono text (anchor)

.text-black .text-white

Customize (anchor)

The text utilities can be customized in the _text.scss document in the [styles/utilities] directory, they're written as standard CSS with limited Sass functionality included for compiling purposes.

Styles 
//  ------------------------------------------------------------
//  Text
//  ------------------------------------------------------------
@use "../../configuration" as *;
@use "../../properties" as *;

@if $enable-text {

// Font sizes
.fs-body, .fs-xl, .fs-lg, .fs-sm, .fs-xs, .fs-xxs, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-size: var(--fs);
  line-height: var(--lh);
}

.fs-body {
  --fs: var(--body);
}

.fs-xl {
  --fs: var(--fs-xl);
}

.fs-lg {
  --fs: var(--fs-lg);
}

.fs-sm {
  --fs: var(--fs-sm);
}

.fs-xs {
  --fs: var(--fs-xs);
}

.fs-xxs {
  --fs: var(--fs-xxs);
}

:where(.h1, .h2, .h3, .h4, .h5, .h6) {
  --lh: var(--lh-header);
  --tw: pretty;
  text-wrap: var(--tw);
}

.h1 {
  --fs: var(--h1);
}

.h2 {
  --fs: var(--h2);
}

.h3 {
  --fs: var(--h3);
}

.h4 {
  --fs: var(--h4);
}

.h5 {
  --fs: var(--h5);
}

.h6 {
  --fs: var(--h6);
}

// Font weights
.fw-normal, .fw-bold, .fw-100, .fw-200, .fw-300, .fw-400, .fw-500, .fw-600, .fw-700, .fw-800, .fw-900 {
  font-weight: var(--fw);
}

.fw-normal {
  --fw: normal;
}

.fw-bold {
  --fw: bold;
}

.fw-100 {
  --fw: 100;
}

.fw-200 {
  --fw: 200;
}

.fw-300 {
  --fw: 300;
}

.fw-400 {
  --fw: 400;
}

.fw-500 {
  --fw: 500;
}

.fw-600 {
  --fw: 600;
}

.fw-700 {
  --fw: 700;
}

.fw-800 {
  --fw: 800;
}

.fw-900 {
  --fw: 900;
}

// Line heights
.lh-body {
  --lh: var(--lh-body);
}

.lh-heading {
  --lh: var(--lh-header);
}

.lh-btn-forms {
  --lh: var(--lh-btn-forms);
}

// Letter/word spacing - no preset values provided, use variable to customize inline.
.text-spacing {
  letter-spacing: var(--ls);
  word-spacing: var(--ws);
}

// Wrap and alignment
.text-pretty {
  text-wrap: pretty;
}

.text-balance {
  text-wrap: balance;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

// Links
.no-decoration a, a.no-decoration {
  text-decoration: none;
}

.no-link a, a.no-link {
  --color: light-dark(#000, #fff);
  --hover: light-dark(#000, #fff);
  --visited: light-dark(#000, #fff);
  text-decoration: none;
}

.text-link a, a.text-link {
  --color: light-dark(#000, #fff);
  --hover: light-dark(#000, #fff);
  --visited: light-dark(#000, #fff);
}

.link-light a, a.link-light, .link-dark a, a.link-dark {
  --hover: color-mix(in srgb, var(--color) 75%, white);
  --visited: color-mix(in srgb, var(--color) 65%, white);
}

.link-light a, a.link-light {
  --color: #{$link-light};
}

.link-dark a, a.link-dark {
  --color: #{$link-dark};
}

// Mono text
.text-white {
  @if $enable-icon-mixins or $enable-icon-styles {
    --ico: #fff;
  }
  color: #fff;
}

.text-black {
  @if $enable-icon-mixins or $enable-icon-styles {
    --ico: #000;
  }
  color: #000;
}

} // END [if/text]