
* 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
3.9 KiB
title, linkTitle, aliases, prev
title | linkTitle | aliases | prev | |
---|---|---|---|---|
Callout Component | Callout |
|
/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). |