Callouts

Callouts can be used throughout your article content to highlight important information.

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>

To apply callout pattern styles, add a class name of .note to an element (typically a <p> tag) using the Source Code view in the Zendesk Guide article editor.

The colors and titles used for the default callouts can be customized directly using theme settings.

For more significant changes, or to use custom callout styles, you must either edit the style.css stylesheet of your theme or the theme/elements/_typography.scss Sass partial.

Related patterns