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; |
This sentence has no text-decoration.
This sentence has underline text-decoration.
This sentence has dotted text-decoration.
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; |
This sentence has no text-transform.
This sentence has a uppercase text-transform.
This sentence has a lowercase text-transform.
This sentence has a capitalize text-transform.
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; |
This sentence has a normal font-style.
This sentence has a italic font-style.
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>