docs: improve options description (#762)

This commit is contained in:
Ludovic Fernandez
2025-08-17 19:42:59 +02:00
committed by GitHub
parent 48bae073cb
commit e3ef6bcebb
20 changed files with 259 additions and 167 deletions

View File

@@ -14,54 +14,36 @@ A built-in component to show important information to the reader.
> [GitHub-style alerts](../../markdown#alerts) are supported since [v0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0).
> It leverages Markdown syntax to render the callout which ensures better portability and readability of the content.
## Example
{{< callout emoji="👾">}}
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 >}}
## Usage
## Examples
### Default
{{< callout emoji="🌐">}}
Hugo can be used to create a wide variety of websites, including blogs, portfolios, documentation sites, and more.
A **callout** is a short piece of text intended to attract attention.
{{< /callout >}}
```markdown
{{</* callout emoji="🌐" */>}}
Hugo can be used to create a wide variety of websites, including blogs, portfolios, documentation sites, and more.
A **callout** is a short piece of text intended to attract attention.
{{</* /callout */>}}
```
### Info
{{< callout type="info" >}}
Please visit GitHub to see the latest releases.
A **callout** is a short piece of text intended to attract attention.
{{< /callout >}}
```markdown
{{</* callout type="info" */>}}
Please visit GitHub to see the latest releases.
A **callout** is a short piece of text intended to attract attention.
{{</* /callout */>}}
```
### Warning
{{< callout type="warning" >}}
This API will be deprecated in the next version.
A **callout** is a short piece of text intended to attract attention.
{{< /callout >}}
```markdown
@@ -73,11 +55,19 @@ A built-in component to show important information to the reader.
### Error
{{< callout type="error" >}}
Something went wrong and it's going to explode.
A **callout** is a short piece of text intended to attract attention.
{{< /callout >}}
```markdown
{{</* callout type="error" */>}}
Something went wrong and it's going to explode.
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). |