Callout

🐺 🔥 🔬 Shortcodes
Callout: 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 congo’s alert shortcode:

… but with more flexibility.

“Like This”

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-x`. 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-900
④	`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-300
❌	`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: triangle-exclamation: The name of the icon (Without the .svg extension.)

⓵ `roundness` #

String Default: md: 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-900: The color to use for the background of the callout when in dark mode

④ `iconcolor` #

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

⑤ `icondark` #

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

⑥ `textcolor` #

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

⑦ `textdark` #

String Default: neutral-300: 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 #

Tailwind supports the following as valid ‘color’ options:

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

Examples #

Example 1: No params


{{﹤ callout>}}
  
**Warning!** This action is destructive!

{{﹤/callout>}}

Should display a callout

Warning! This action is destructive!

Example 2: Unnamed param


{{﹤ callout "bomb" "xl" "primary-100/20"  
"primary-100/20" "secondary-400/50"
  
"secondary-400/50" "red-400/50" "red-400/50">}}

**Warning!** I ATE BEANS TODAY!

{{﹤/callout>}}

Should use the params’ values as expected:

BG: primary-100/20 Icon: secondary-400/50 Text: red-400/50

Warning! I ATE BEANS TODAY!

Example 3: Named params


{{﹤ callout  icon="bomb" roundness="xl"

textcolor="neutral-500" textdark="neutral-900"
bgcolor="secondary-400/50" bgdark="secondary-400/20"
iconcolor="red-400/80" icondark="red-400/80" >}}
  
**Warning!** I ATE BEANS TODAY!

{{﹤/callout>}}

Should use the params' values as expected BG: secondary-400/50 BG Dark: secondary-400/10 Icon: red-400/80 Icon Dark: red-400/80 Text: neutral-500 Text Dark: neutral-900

Warning! I ATE BEANS TODAY!