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.

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

Font sizes (anchor)

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

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

Lists (anchor)

See the list utilities page.

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-header, .lh-forms {
  line-height: var(--lh);
}

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

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

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

// 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;
}

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

// Links
.no-link a, a.no-link {
  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]