Content styles

Highlight important aspects of your content using ready-made callouts and typographic styles.

About the plugin

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.

Examples

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:

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

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

This is an example of a warning section available in all themes. You can apply this style to any content by simply applying the .warning class name to a paragraph or container 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>

Success is not defined by the ability to have no complaints, it is defined by the ability to deal with them.

Mikkel Svane in Startupland
<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>

The default styles and titles used for both can be customized directly using theme settings.

For more radical 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.

Additional typographic elements

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

Learn more about how to style article content using custom element and styles in our framework documentation, which also includes a description of the plugin’s options and events.

Related plugins