CMS Design System

Set whether text is underlined or not using the text-decoration utility.

Format: .ds-u-text-decoration--[underline|line-through|none]

.ds-u-text-decoration--underline

Underlined text

.ds-u-text-decoration--line-through

line-through text

.ds-u-text-decoration--noneLink text without underline

Code snippet

<section class="example-list">
  <article>
    <code class="ds-margin-bottom--1">.ds-u-text-decoration--underline</code>
    <div class="ds-u-text-decoration--underline">Underlined text</div>
  </article>
  <article>
    <code class="ds-margin-bottom--1">.ds-u-text-decoration--line-through</code>
    <div class="ds-u-text-decoration--line-through">line-through text</div>
  </article>
  <article>
    <code class="ds-margin-bottom--1">.ds-u-text-decoration--none</code>
    <a class="ds-u-text-decoration--none" href="#">
      Link text without underline
    </a>
  </article>
</section>