Formatting styles

All of our themes contain a huge number of custom elements and styles that you can use to make your article content more engaging and easier to read.

Callouts

Note styles can be used to emphasize important information within your article content. To apply the style, add a class name of .note to an element (typically a <p> tag) using the Source Code view in the Zendesk Guide article editor:

<p class="note">
  This is an example of a standard note available in all themes.
  You can apply this style to any content by simply applying the <code>.note</code> class name to a 
  paragraph or container element.
</p>

Warning styles can help draw readers attention to critical steps in a process. To apply this style, add a class name of .warning to an element:

<p class="warning">
  This is an example of a warning section available in all themes.
  You can apply this style to any content by simply applying the <code>.warning</code> class name to a 
  paragraph or container element.
</p>

The default colors and titles used for both can be customized directly using theme settings. For more significant changes, the relevant styles can be found in the theme/elements/_typography.scss Sass file and easily modified to match your company brand. Our Pattern Library also contains some examples of other callout styles that you could use, including tips and different styles for notes and warnings.

Blockquotes

<blockquote class="font-size-lg">
  <p>
    Success is not defined by the ability to have no complaints, it is defined by the ability to deal with them.
  </p>
  <footer class="text-gray-500">
    Mikkel Svane in <cite title="Source Title">Startupland</cite>
  </footer>
</blockquote>

List styles

Use .list-number to apply a custom numbered style to a list.

<ol class="list-number">
  <li class="list-item">List item</li>
  <li class="list-item">List item</li>
  <li class="list-item">List item</li>
</ol>

Use .list-check to apply a custom checklist style to a list.

<ul class="list-check">
  <li class="list-item">List item</li>
  <li class="list-item">List item</li>
  <li class="list-item">List item</li>
</ul>

Additional list styles are available for use throughout the help center.

Additional typographic elements

There are a variety of elements included in our themes which you can apply using the Zendesk article editor in addition to interactive elements like tabs and toggles. Learn more about using typography styles.