Skip to main content
  1. Snippits & Exemplars/
  2. WolfspyreLabs Exemplars/
  3. WolfspyreLabs ShortBarks/

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!