Text

Basic modifiers for text size and weight and list options 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)

<ul class="ul-none">

First item
Second item
Third item
Fourth item

<ul class="ul-circle">

First item
Second item
Third item
Fourth item

<ul class="ul-square">

First item
Second item
Third item
Fourth item

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

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

// Lists
.ul-none {
  --pl: 0;
  list-style-type: "";
}

.ul-circle {
  list-style-type: circle;
}

.ul-square {
  list-style-type: square;
}

.dl-none {
  --dd-ml: 0;
}

} // END [if/text]