Using typography styles

Various built-in and custom article content styles can be applied using the Zendesk Guide article editor.

Headings

Use .h1 through .h6 classes when you want to match the font styling of a heading but cannot use the associated HTML element.

<p class="h1 truncate ...">The quick brown fox jumped over the lazy dog.</p>
<p class="h2 truncate ...">The quick brown fox jumped over the lazy dog.</p>
<p class="h3 truncate ...">The quick brown fox jumped over the lazy dog.</p>
<p class="h4 truncate ...">The quick brown fox jumped over the lazy dog.</p>
<p class="h5 truncate ...">The quick brown fox jumped over the lazy dog.</p>
<p class="h6 truncate ...">The quick brown fox jumped over the lazy dog.</p>

Use font size utilities when you need to create larger (or smaller) headings.

Inline text elements

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

You can also use our text color and background color utilities to apply theme colors to some or all of a paragraph.

<p>
  This is an example of a paragraph that you might find in an article with 
  <span class="text-red-500">important information</span> highlighted using our 
  <span class="text-white bg-red-500">color utilities</span> to ensure that 
  it's not missed by visitors
</p>

Abbreviations

The HTML Abbreviation element (<abbr>) represents an abbreviation or acronym.

Use the optional title attribute to provide an expansion or description for the abbreviation.

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

There are a variety of other elements included in our themes which you can use within article content as well, including:

And much more.

Other elements

You can also easily create your own custom content styles by combining utilities. For example, a box with a light drop shadow could be used to contain a summary of an article:

<div class="py-3 px-6 border border-radius shadow-sm">
  <h3 class="mt-4">
    Summary
  </h3>
  <ol>
    <li><a href="#">Getting started</a></li>
    <li><a href="#">Creating articles</a></li>
    <li><a href="#">Styling articles</a></li>
  </ol>
</div>

The summary, in turn, could be automatically generated by our Table of Contents extension.

Questions or feedback about this article? Let us know