Callout

Callouts are used to call the user’s attention to a block of information that they really need to see. A callout displays its content with eye-catching formatting.

Use the jhdocs-callout shortcode to display a callout.

This shortcode takes the following parameters:

• type: The type of styling to display. One of neutral, tip, do, dont, warning, info
• icon: Icon to display. Use a value from the icons page or leave this blank to have it set based on the specified type.
• title: Callout title. String that specifies the title to display. Leave blank for no title.

Simple example

This first callout example is a simple one. It sets the type and title to “tip”, and provides content. The callout color and icon are all based on the specified type, which is “tip” in this case.

{{< jhdocs-callout type="tip" title="Tip" >}}
It's best to save your work often.
{{< /jhdocs-callout >}}

Here is the rendered result of this markdown:

More complex example

The next example is a little more complicated… it sets the type to “warning”, the icon to “camera”, and doesn’t specify a title.

{{< jhdocs-callout type="warning" icon="camera" >}}
Don't forget to remove the lens cap before snapping that pic.
{{< /jhdocs-callout >}}

Here is the rendered result of this markdown:

“Neutral” styling example

{{< jhdocs-callout type="neutral" title="Checkpoint" >}}
Be sure to read the [Hugo documentation](https://gohugo.io/) before proceeding.
{{< /jhdocs-callout >}}

Here is the rendered result of this markdown:

“Tip” styling example

{{< jhdocs-callout type="tip" title="Tip" >}}
Buy low, sell high.
{{< /jhdocs-callout >}}

Here is the rendered result of this markdown:

“Info” styling example

{{< jhdocs-callout type="info" title="Did you know?" >}}
A crocodile cannot stick its tongue out.
{{< /jhdocs-callout >}}

Here is the rendered result of this markdown:

“Warning” styling example

{{< jhdocs-callout type="warning" title="Warning" >}}
Memento mori.
{{< /jhdocs-callout >}}

Here is the rendered result of this markdown:

“Do” styling example

{{< jhdocs-callout type="do" title="Do" >}}
Brush your teeth after every meal.
{{< /jhdocs-callout >}}

Here is the rendered result of this markdown:

“Don’t” styling example

{{< jhdocs-callout type="dont" title="Don’t" >}}
Don't poke a skunk.
{{< /jhdocs-callout >}}

Here is the rendered result of this markdown: