Styles

Utility classes for setting various element font styles.

Text Decoration

Text-decoration is a shorthand CSS property that sets the appearance of text decorative lines. It is shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and the text-decoration-thickness properties.

Starting in v5.8.0, Dialtone began providing immutable type classes, meaning they include an !important to override CSS specificity.

Class Output
.d-td-none text-decoration: none !important;
.d-td-underline text-decoration: underline !important;
.d-td-dotted text-decoration: dotted !important;
.d-td-unset text-decoration: unset !important;
.d-td-none

This sentence has no text-decoration.

.d-td-underline

This sentence has underline text-decoration.

.d-td-dotted

This sentence has dotted text-decoration.

.d-td-unset

This sentence's text-decoration has been unset

<p class="d-td-none"></p>
<p class="d-td-underline"></p>
<p class="d-td-dotted"></p>
<p class="d-td-unset"></p>

Text Transform

The text-transform CSS property tells how text should be visually treated. Starting in v5.8.0, Dialtone began providing immutable type classes, meaning they include an !important to override CSS specificity.

Class Output
.d-tt-none text-transform: none !important;
.d-tt-uppercase text-transform: uppercase !important;
.d-tt-lowercase text-transform: lowercase !important;
.d-tt-capitalize text-transform: capitalize !important;
.d-tt-unset text-transform: unset !important;
.d-tt-none

This sentence has no text-transform.

.d-tt-uppercase

This sentence has a uppercase text-transform.

.d-tt-lowercase

This sentence has a lowercase text-transform.

.d-tt-capitalize

This sentence has a capitalize text-transform.

.d-tt-unset

This sentence text-transform value is unset.

<p class="d-tt-none"></p>
<p class="d-tt-uppercase"></p>
<p class="d-tt-lowercase"></p>
<p class="d-tt-capitalize"></p>
<p class="d-tt-unset"></p>

Font Style

The font-style CSS property tells how text should be visually styled between normal or italic.

Class Output
.d-td-normal font-style: normal !important;
.d-td-italic font-style: italic !important;
.d-td-unset font-style: unset !important;
.d-fs-normal

This sentence has a normal font-style.

.d-fs-italic

This sentence has a italic font-style.

.d-fs-unset

This sentence's text-decoration has been unset

<p class="d-fs-normal"></p>
<p class="d-fs-italic"></p>
<p class="d-fs-unset"></p>