Files
hextra_mirror/docs/content/docs/guide/shortcodes/callout.md
Xin 83f3b5052e chore(docs): rename exampleSite to docs and create examples (#813)
* chore(docs): rename `exampleSite` to `docs` and create `examples`

* chore(build): update build script to support new version format and source directories; add v0.10 to documentation menu
2025-09-06 12:06:26 +01:00

3.9 KiB
Raw Blame History

title, linkTitle, aliases, prev
title linkTitle aliases prev
Callout Component Callout
callouts
/docs/guide/shortcodes

A built-in component to show important information to the reader.

Note

GitHub-style alerts are supported since v0.9.0. It leverages Markdown syntax to render the callout which ensures better portability and readability of the content.

Examples

{{< callout >}} A callout is a short piece of text intended to attract attention. {{< /callout >}}

{{< callout type="info" >}} A callout is a short piece of text intended to attract attention. {{< /callout >}}

{{< callout type="warning" >}} A callout is a short piece of text intended to attract attention. {{< /callout >}}

{{< callout type="error" >}} A callout is a short piece of text intended to attract attention. {{< /callout >}}

{{< callout type="important" >}} A callout is a short piece of text intended to attract attention. {{< /callout >}}

Default

{{< callout >}} A callout is a short piece of text intended to attract attention. {{< /callout >}}

{{</* callout */>}}
  A **callout** is a short piece of text intended to attract attention.
{{</* /callout */>}}

Info

{{< callout type="info" >}} A callout is a short piece of text intended to attract attention. {{< /callout >}}

{{</* callout type="info" */>}}
  A **callout** is a short piece of text intended to attract attention.
{{</* /callout */>}}

Warning

{{< callout type="warning" >}} A callout is a short piece of text intended to attract attention. {{< /callout >}}

{{</* callout type="warning" */>}}
  A **callout** is a short piece of text intended to attract attention.
{{</* /callout */>}}

Error

{{< callout type="error" >}} A callout is a short piece of text intended to attract attention. {{< /callout >}}

{{</* callout type="error" */>}}
  A **callout** is a short piece of text intended to attract attention.
{{</* /callout */>}}

Important

{{< callout type="important" >}} A callout is a short piece of text intended to attract attention. {{< /callout >}}

{{</* callout type="important" */>}} 
  A **callout** is a short piece of text intended to attract attention.
{{</* /callout */>}}

Custom Icon

{{< callout icon="sparkles" >}} A callout is a short piece of text intended to attract attention. {{< /callout >}}

{{</* callout icon="sparkles" */>}}
  A **callout** is a short piece of text intended to attract attention.
{{</* /callout */>}}

{{< callout type="important" icon="sparkles" >}} A callout is a short piece of text intended to attract attention. {{< /callout >}}

{{</* callout type="important" icon="sparkles" */>}}
  A **callout** is a short piece of text intended to attract attention.
{{</* /callout */>}}

Emoji

{{< callout emoji="🌐" >}} A callout is a short piece of text intended to attract attention. {{< /callout >}}

{{</* callout emoji="🌐" */>}}
  A **callout** is a short piece of text intended to attract attention.
{{</* /callout */>}}

{{< callout type="info" emoji="" >}} A callout is a short piece of text intended to attract attention. {{< /callout >}}

{{</* callout type="info" emoji="" */>}}
  A **callout** is a short piece of text intended to attract attention.
{{</* /callout */>}}

Options

Parameter Description
type The type of callout. (default, info, warning, error, important)
emoji The emoji to show before the callout.
icon The icon to show before the callout. (related to type or can be a custom icon).