drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-08-24 08:36:39 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(callout): revamp of the callouts (#767)

Browse Source 
* 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
This commit is contained in:
Ludovic Fernandez
2025-08-22 00:31:16 +02:00
committed by GitHub
parent a3635ea638
commit f4d75a4e5b
27 changed files with 448 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
exampleSite/content/docs/guide/shortcodes/callout.md
View File

@@ -16,15 +16,35 @@ A built-in component to show important information to the reader.
## 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 emoji="🌐">}}
{{< callout >}}
A **callout** is a short piece of text intended to attract attention.
{{< /callout >}}
```markdown
{{</* callout emoji="🌐" */>}}
A **callout** is a short piece of text intended to attract attention.
{{</* callout */>}}
A **callout** is a short piece of text intended to attract attention.
{{</* /callout */>}}
```
@@ -64,10 +84,66 @@ A built-in component to show important information to the reader.
{{</* /callout */>}}
```
### Important
{{< callout type="important" >}}
A **callout** is a short piece of text intended to attract attention.
{{< /callout >}}
```markdown
{{</* 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 >}}
```markdown
{{</* 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 >}}
```markdown
{{</* 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 >}}
```markdown
{{</* 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 >}}
```markdown
{{</* 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`) |
| `emoji` | The emoji to show before the callout. |
| `icon` | The emoji of the callout (related to type or can be a custom emoji). |
| 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). |