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 ParamsNot 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!