drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-08-23 10:07:11 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity
Files
f4d75a4e5b107d32c0de123ea9e78f66bf037605
hextra_mirror/exampleSite/content/docs/guide/shortcodes/callout.md
Ludovic Fernandez f4d75a4e5b feat(callout): revamp of the callouts (#767) 
* feat(callout): revamp of the callouts

* fix: doc

* chore: refactor gh alert

* feat: same colors on callouts and gh alerts

* docs: more relevant examples

* docs: i18n

* docs: update existing callouts
2025-08-21 23:31:16 +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).