Dialtone

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>