midtowndrafting.com/content/docs/guide/shortcodes/callout.md

80 lines
1.7 KiB
Markdown
Raw Normal View History

2024-05-03 19:04:48 -04:00
---
title: Callout Component
linkTitle: Callout
aliases:
- callouts
prev: /docs/guide/shortcodes
---
A built-in component to show important information to the reader.
<!--more-->
## 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
### Default
{{< callout emoji="🌐">}}
Hugo can be used to create a wide variety of websites, including blogs, portfolios, documentation sites, and more.
{{< /callout >}}
```markdown
{{</* callout emoji="🌐" */>}}
Hugo can be used to create a wide variety of websites, including blogs, portfolios, documentation sites, and more.
{{</* /callout */>}}
```
### Info
{{< callout type="info" >}}
Please visit GitHub to see the latest releases.
{{< /callout >}}
```markdown
{{</* callout type="info" */>}}
Please visit GitHub to see the latest releases.
{{</* /callout */>}}
```
### Warning
{{< callout type="warning" >}}
This API will be deprecated in the next version.
{{< /callout >}}
```markdown
{{</* callout type="warning" */>}}
A **callout** is a short piece of text intended to attract attention.
{{</* /callout */>}}
```
### Error
{{< callout type="error" >}}
Something went wrong and it's going to explode.
{{< /callout >}}
```markdown
{{</* callout type="error" */>}}
Something went wrong and it's going to explode.
{{</* /callout */>}}
```