Callouts

Syntax

Callouts are very nearly equivalent to standard Markdown block quotes in their syntax, other than some specific requirements on their content: To be considered a “callout”, a block quote must start with an initial emoji. This is used to determine the callout's theme. Here's an example of how you might write a success callout.

> 👍 Success
>
> Vitae reprehenderit at aliquid error voluptates eum dignissimos.

Emoji Themes

Default themes are specified using one of the following emojis. (If you don't like the one we've chosen, you can always switch to the alternate!)

> **👋** Lorem ipsum dolor sit amet consectetur adipisicing elit.

Examples

👍

Success

Vitae reprehenderit at aliquid error voluptates eum dignissimos.

📘

Info

Lorem ipsum dolor sit amet consectetur adipisicing elit.

🚧

Warning

Hic, neque a nisi adipisci non repudiandae ratione id natus.

❗️

Error

Sunt eius porro assumenda sequi, explicabo dolorem unde.

If a callout starts with an emoji that's not dedicated to one of the themes (above), the component will fall back to a default block quote-style color scheme. See here for the full list of supported emojis.

🥇

Themeless

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Custom CSS

Callouts come in various themes. These can be customized using the following CSS selectors and variables:

.markdown-body .callout.callout_warn {
  --text: #6a737d; // theme text color default
  --title: inherit; // theme title color (falls back to text color by default)
  --background: #f8f8f9;
  --border: #8b939c;
}

.markdown-body .callout.callout_default {
} /* gray */
.markdown-body .callout.callout_info {
} /* blue */
.markdown-body .callout.callout_okay {
} /* green */
.markdown-body .callout.callout_warn {
} /* orange */
.markdown-body .callout.callout_error {
} /* red */

Extended Themes

Each callout will also have a theme attribute that's set to it's emoji prefix. Combined with a basic attribute selector, we should be able to create entirely new styles per-emoji, in addition to the built in themes above!

.markdown-body .callout[theme='🎅'] {
  --background: #c54245;
  --border: #ffffff6b;
  --text: #f5fffa;
}

> 🎅 Old Saint Nick
>
> 'Twas the night before Christmas, when all through the house not a creature was stirring, not even a mouse. The stockings were hung by the chimney with care, in hopes that St. Nicholas soon would be there. The children were nestled all snug in their beds, while visions of sugar plums danced in their heads.

<!-- condensed for clarity! -->
<blockquote class="callout callout_default" theme="🎅">
  <h3>🎅 Old Saint Nick</h3>
  <p>
    'Twas the night before Christmas, when all through the house not a creature was stirring, not even a mouse. The
    stockings were hung by the chimney with care, in hopes that St. Nicholas soon would be there. The children were
    nestled all snug in their beds, while visions of sugar plums danced in their heads.
  </p>
</blockquote>

And voilà...

🎅

Old Saint Nick

'Twas the night before Christmas, when all through the house not a creature was stirring, not even a mouse. The stockings were hung by the chimney with care, in hopes that St. Nicholas soon would be there. The children were nestled all snug in their beds, while visions of sugar plums danced in their heads.

Custom Icons

Emojis are already a pretty good starting point as far as default icon options go! There are a lot of 'em, and they're supported across nearly all platforms. But what if we're going for a different look, or need to match our docs to a branding kit? Icons are a big part of setting the "tone" for your site.

With a touch of Custom CSS, we should be able to get a callout using the 📷 emoji to display an icon font glyph!

.callout[theme='📷'] {
  --emoji: unset;
  --icon: '\f030'; /* https://fontawesome.com/icons/camera?f=classic&s=solid */
  --icon-color: #c50a50;
}

> 📷 Cool pix!
>
> Vitae reprehenderit at aliquid error voluptates eum dignissimos.

This works like a charm:

.callout[theme='📷'] {
  --icon-font: 'Font Awesome 6 Pro';
}

Edge Cases

> 🥇  No body text.

🥇

No body text.

> 🥈
>
> Lorem ipsum dolor sit amet consectetur adipisicing elit. Error eos animi obcaecati quod repudiandae aliquid nemo veritatis ex, quos delectus minus sit omnis vel dolores libero, recusandae ea dignissimos iure?

🥈

Lorem ipsum dolor sit amet consectetur adipisicing elit. Error eos animi obcaecati quod repudiandae aliquid nemo veritatis ex, quos delectus minus sit omnis vel dolores libero, recusandae ea dignissimos iure?

{`