Formatting Text

Bold

You can make text bold by adding the class cd-bold. Bold text typically uses a strong element.

Example

The term bold refers to text that's thicker than the text around it.

<p class="cd-paragraph">
  The term <strong class="cd-bold">bold</strong> refers to
  text that's thicker than the text around it.
</p>

Semibold

You can make text semibold by adding the class cd-semibold.

Example

This text is semibold.

<p class="cd-paragraph">
  This text is <span class="cd-semibold">semibold</span>.
</p>

Italic

You can make text italic by adding the class cd-italic. Italic text typically uses an em element.

Example

The reason the standard HTML element for italic text is called em is because it stands for emphasis.

<p class="cd-paragraph">
  The reason the standard HTML element for italic text is
  called <code class="cd-code">em</code> is because it
  stands for <span class="cd-italic">em</span>phasis.
</p>

Underline

You can make text underlined by adding the class cd-underline.

Example

This text is underlined.

<p class="cd-paragraph">
  This text is <span class="cd-underline">underlined</span>.
</p>

Strikethrough

You can create strikethrough text by adding the class cd-strikethrough. Strikethrough text typically uses an s element.

Example

This text is ~~strikethroughed~~ ~~striked through~~ crossed out.

<p class="cd-paragraph">
  This text is
  <s class="cd-strikethrough">strikethroughed</s>
  <s class="cd-strikethrough">striked through</s>
  crossed out.
</p>

Combining Underline and Strikethrough

Behind the scenes, underline and strikethrough both use the same CSS property. The cd-underline and cd-strikethrough classes automatically handle this, so you can combine them without any issues.

Subscript

You can create subscript text by adding the class cd-subscript. Subscript text typically uses a sub element.

Example

The formula for water is H₂O.

<p class="cd-paragraph">
  The formula for water is H<sub class="cd-subscript">2</sub
  >O.
</p>

Superscript

You can create superscript text by adding the class cd-superscript. Superscript text typically uses a sup element.

Example

The speed of light is 3.00 x 10⁸ m/s.

<p class="cd-paragraph">
  The speed of light is 3.00 x 10<sup class="cd-superscript"
    >8</sup
  >
  m/s.
</p>

Inline Code/Monospaced Text

You can format inline code or monospaced text by adding the class cd-code. There are multiple elements that can be used for monospaced text based on semantics.

Example

To print "Hello, World!" in Python, you would write print("Hello, World!").

<p class="cd-paragraph">
  To print "Hello, World!" in Python, you would write
  <code class="cd-code">print("Hello, World!")</code>.
</p>

Line Clamping

You can limit text to a specific number of lines by adding the class cd-clamp-n, where n is a number between 1 and 6. Browsers will ensure that text does not exceed this number of lines, adding an ellipsis (...) if there is additional text that is not visible.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce condimentum at sem et tristique. Sed elementum, dolor ut vulputate scelerisque, urna dolor dignissim ipsum, nec porta magna ante et dolor. Quisque est ligula, pulvinar ut pharetra sed, tempor nec neque. Suspendisse accumsan pellentesque metus, at elementum leo fringilla nec. Cras iaculis nisi nec laoreet posuere. Suspendisse varius, lacus at lacinia tristique, dolor tortor rutrum augue, a sodales risus metus at nibh. Praesent imperdiet mollis urna, ut blandit nulla facilisis in. Donec ac mi nisl. Sed ultricies dignissim leo, eu suscipit ante pharetra vel. In ultrices ex ut ligula tempus mollis. Aliquam mollis laoreet diam, non convallis tellus tincidunt eu. Nullam a turpis sodales, laoreet magna eu, pharetra nisi. Integer feugiat justo at tellus fringilla, ut commodo lorem semper.

<p class="cd-paragraph cd-clamp-3">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Fusce condimentum at sem et tristique. Sed elementum,
  dolor ut vulputate scelerisque, urna dolor dignissim
  ipsum, nec porta magna ante et dolor. Quisque est ligula,
  pulvinar ut pharetra sed, tempor nec neque. Suspendisse
  accumsan pellentesque metus, at elementum leo fringilla
  nec. Cras iaculis nisi nec laoreet posuere. Suspendisse
  varius, lacus at lacinia tristique, dolor tortor rutrum
  augue, a sodales risus metus at nibh. Praesent imperdiet
  mollis urna, ut blandit nulla facilisis in. Donec ac mi
  nisl. Sed ultricies dignissim leo, eu suscipit ante
  pharetra vel. In ultrices ex ut ligula tempus mollis.
  Aliquam mollis laoreet diam, non convallis tellus
  tincidunt eu. Nullam a turpis sodales, laoreet magna eu,
  pharetra nisi. Integer feugiat justo at tellus fringilla,
  ut commodo lorem semper.
</p>

Gradient Text

You can add a gradient to text by adding the class cd-gradient-text. To customize the colors, set the following CSS variables:

--cd-gradient-text-start
--cd-gradient-text-middle
--cd-gradient-text-end

You may choose to combine this with the cd-bold or cd-semibold classes if the gradient text is being used for emphasis.

Example

Default gradient

Custom gradient

<div
  style="
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  "
>
  <p class="cd-paragraph cd-gradient-text">
    Default gradient
  </p>
  <p
    class="cd-paragraph cd-gradient-text"
    style="
      --cd-gradient-text-start: var(--cd-color-red-5);
      --cd-gradient-text-middle: var(--cd-color-red-4);
      --cd-gradient-text-end: var(--cd-color-red-3);
    "
  >
    Custom gradient
  </p>
</div>