Watch our Academy video 📹 on creating your first article for a step-by-step guide:

Step 1. Create a new article or edit an existing one.

Step 2. In the Write tab of an article, hit enter for a new line and the media embedder bar appears. Click on the "Add callout" option.

Step 3. Add text in the callout, this can be styled by adding headers, quotes, lists and dividers. The style of the callout itself can also be changed, depending on the type (on the right):

Step 4. After adding text in the callout, the text itself can still be formatted by applying bold, italic, underline, strikethrough, small, inline code or a link to the text.

🎉 There you go!

While the default styling of callouts is set, it's possible to add custom styling through the CSS files.

In the code, you can find the callouts with a <aside> element containing 2 classes, strchf-callout and strchf-callout-type where type is a variable, depending on the callout type being used.

The general strchf-callout class can be used to change the padding, the rounding of corners, the font, .. while the type-specific classes are ideal to change the background-color, text color etc.

<aside>

Callouts are supported on most websites & destinations, but not everywhere.

The websites below are tested, it should work for other HTML-based websites.

Callouts will be displayed as plain text on Medium, Devto, SharePoint & Contentful as these channels don't support callouts.

Callouts might not work in email/newsletter tools. Yet, they do work for ambassador emails (not in Outlook). The callouts also appear with styling in the full RSS feed.