Callout

🦍 Shortcodes
alert: Create a styled, attention-catching message box within your article.
It’s useful for drawing attention to important information that you don’t want the reader to miss.

I wanted something SIMILAR to the alert shortcode provided by congo; but with more flexibility.

so… in my usual why not? fashion; I decided to robustify it.

Here are the configuration parameters:

Attributes #

Position	Name	Usage	default
⓪	`icon`	Leverages any asset in the `assets/icons/` folders.	`triangle-exclamation`
⓵	`roundness`	Sets the value of `rounded-xxx`. Supported options: [ “`0`” “`none`” “`sm`” “`md`” “`lg`” “`full`” “`xl`” “`xxl`” “`2xl`” ]	`md`
②	`bgcolor`	Sets the background color of the callout **See Color support options	`primary-100`
③	`bgdark`	Sets the background color of the callout when in dark mode **See Color support options	`primary-400`
④	`iconcolor`	Sets the color of the callout icon **See Color support options	`primary-400`
⑤	`icondark`	Sets the color of the callout icon when in dark mode**See Color support options	`primary-400`
⑥	`textcolor`	Sets the background color of the callout **See Color support options	`primary-400`
⑦	`textdark`	Sets the background color of the callout when in dark mode **See Color support options	`neutral-l00`
	`classes`	Overload the classes with a custom collection. Supercedes any declared colors. so you’ll need to redeclare them	`flex px-4 py-3`

Note about Positional Params

Not ALL available parameters are referencable positionally.
If you want the additional flexibility afforded from the less common parameters, call them by name.

Attributes #

⓪ `icon` #

String Default: undef
The name of the icon (Without the .svg extension.)

Unless set differently via the path parameter,
the shortcode expects the icon to reside in assets/icons.

⓵ `roundness` #

String Default: undef
The rounded tailwind property to apply to the callout container

⓶ `bgcolor` #

String Default: primary-100 The color to use for the background of the callout

③ `bgdark` #

String Default: primary-400 The color to use for the background of the callout when in dark mode

④ `iconcolor` #

String Default: primary-100 primary-100 The color to use for the icon the callout

⑤ `icondark` #

String Default: primary-100 primary-100 The color to use for the icon the callout when in dark mode

⑥ `textcolor` #

String Default: primary-100 primary-100 The color to use for the text the callout

⑦ `textdark` #

String Default: primary-100 primary-100 The color to use for the text the callout when in dark mode

`classes` #

String Default: undef
The set of tailwind classes to apply to the icon’s parent span element.

Color options #

So, Tailwind supports the following as valid ‘color’ options:

(primary|secondary|neutral)-shade
primary-shade/opacity
color-shade/opacity
#000000 ↔ #FFFFFF
#00000000 ↔ #FFFFFFFF

Parameter	Description
`icon`	Optional. the icon to display on the left side. Default: `exclaimation triangle icon` (Check out the icon shortcode for more details on using icons.)
`iconColor`	Optional. the color for the icon in basic CSS style. Can be either hex values (`#FFFFFF`) or color names (`white`) By default chosen based on the current color theme.
`cardColor`	Optional. the color for the card background in basic CSS style. Can be either hex values (`#FFFFFF`) or color names (`white`) By default chosen based on the current color theme.
`textColor`	Optional. the color for the text in basic CSS style. Can be either hex values (`#FFFFFF`) or color names (`white`) By default chosen based on the current color theme.

The input is written in Markdown so you can format it however you please.

Example 1: No params

{{< alert >}}
**Warning!** This action is destructive!
{{< /alert >}}

Warning! This action is destructive!

Example 2: Unnamed param

{{< alert "twitter" >}}
Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter.
{{< /alert >}}

Don’t forget to follow me on Twitter.

Example 3: Named params

{{< alert icon="fire" cardColor="#e63946" iconColor="#1d3557" textColor="#f1faee" >}}
This is an error!
{{< /alert >}}

This is an error!