Adding Info, Tip and Warning Callouts

Updated 3 days ago by Jake Peters

Wanna make your HelpDocs look super awesome? Try out some of our styles.

Here's a tip!
Check out this info box
Beware of this warning!

If you need to add snippets of code, that's super simple too with our automatic code syntax highlighting.  Check out our HelpDoc on that here.

You can access our pre-defined styles in the Format dropdown. Here's how to add them in a couple clicks:

  1. In the article editor, press Format in the article toolbar
  2. Select either TipInfo, or Warning
  3. Hit Save
Callouts

Inserting a callout within an ordered list

Getting a callout to work inside an ordered list can be a little tricky, so you'll have to dig into some code. Don't worry, it's not too tricky!

  1. Switch editor mode to HTML
  2. Click Prettify to make the code easier to read
  3. Locate the paragraph you want to turn into a callout
    1. Before the paragraph, insert the following code depending on the type of callout you want to create:
      <div class="tip-callout/note-callout/warning-callout">
    2. After the paragraph, insert the following closing div tag:
      </div>
  4. Hit Save


What did you think of this doc?