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]