Esc

Creating callouts and quotes

All of our themes come with a range of content styles that you can use to format your article content.

In this article

These custom styles have been designed to make article content more engaging and easier to read.

Notes

Notes 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>

Warnings

Warning styles can help draw readers attention to critical steps in a process. To apply the 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 styles 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 can use.

Blockquotes

Use <blockquote> for quoting blocks of content from another source within your document.

<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>

Our themes also include general typography elements as well as:

And much more.

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 bg-white 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 itself could be automatically generated by our Table of Contents extension.

Questions or feedback about this article? Let us know