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 are compiled from the _text.scss document within the [styles/utilities] directory. The Sass @if rule controls compiling depending on settings in the configuration.scss document.

Styles
@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
.txt-pretty {
  text-wrap: pretty;
}

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

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

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

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

// Letter/word spacing - no preset values provided, use variable to customize inline.
.txt-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: var(--text);
  --visited: var(--text);
}

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

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

// 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]