All typographic styles and elements can be applied using the Zendesk article editor, though custom class names can only be added using the Source Code view of the 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.
<h1 class="truncate ...">The quick brown fox jumped over the lazy dog.</h1>
<h2 class="truncate ...">The quick brown fox jumped over the lazy dog.</h2>
<h3 class="truncate ...">The quick brown fox jumped over the lazy dog.</h3>
<h4 class="truncate ...">The quick brown fox jumped over the lazy dog.</h4>
<h5 class="truncate ...">The quick brown fox jumped over the lazy dog.</h5>
<h6 class="truncate ...">The quick brown fox jumped over the lazy dog.</h6>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>Customization
The $heading_font and $color_heading theme setting variables control the font family and color of headings, respectively.
| Variable | Description |
|---|---|
$margin-heading | The margin applied to <h1> - <h6> elements. |
$line-height-heading | The line height applied to <h1> - <h6> elements. |
$font-size-h1 | The font size of the <h1> element. |
$font-weight-h1 | The font weight of the <h1> element. |
$font-size-h2 | The font size of the <h2> element. |
$font-weight-h2 | The font weight of the <h2> element. |
$font-size-h3 | The font size of the <h3> element. |
$font-weight-h3 | The font weight of the <h3> element. |
$font-size-h4 | The font size of the <h4> element. |
$font-weight-h4 | The font weight of the <h4> element. |
$font-size-h5 | The font size of the <h5> element. |
$font-weight-h5 | The font weight of the <h5> element. |
$font-size-h6 | The font size of the <h6> element. |
$font-weight-h6 | The font weight of the <h6> element. |
$color-mark | The color of the <mark> element. |
$bg-color-mark | The background color of the <mark> element. |