Using callouts to highlight content in the article editor

<body>
<p id="docs-hc-snippet" style="display: none;">Callouts are styled blocks of text that visually separate important information from the surrounding article text. They use a distinct style, including an icon and colored background, to help readers identify information that needs special attention. You can use them to highlight warnings, tips, reminders, or other key details so users are more likely to notice them.</p>
<div class="article-banners">
<div id="docs-wmp-link">
<a href="https://support.zendesk.com/hc/en-us/articles/5411234991258-plan" rel="noopener" target="_blank">What's my plan?</a>
</div>

<div class="article-banner" id="suite_all">
<table>
<tbody>
<tr>
<td>
<strong>All Suites</strong>
</td>
<td>Team, Growth, Professional, Enterprise, or Enterprise Plus</td>
</tr>
</tbody>
</table>
</div>

<div class="article-banner" id="support_with_guide_all">
<table>
<tbody>
<tr>
<td>
<strong>Support with</strong>
</td>
<td>Knowledge Professional or Enterprise</td>
</tr>
</tbody>
</table>
</div>

</div>
<div id="docs-ai-summary">
<p id="docs-ai-summary-toggle">Summary: <span id="up-triangle">◀</span><span id="down-triangle">▼</span></p>
<p id="docs-ai-summary-content">Callouts let you highlight important information in an article with a clear visual block, icon, and colored background. You can add Info, Warning, Error, or Tip callouts from the article editor, then move, space, or delete them as needed. Use callouts to draw attention to warnings, tips, reminders, and other key details without custom HTML.</p>
</div>

<div class="body">

<p class="p">Callouts are styled blocks of text that visually separate important information from the
surrounding article text. They use a distinct style, including an icon and colored
background, to help readers identify information that needs special attention. You can
use them to highlight warnings, tips, reminders, or other key details so users are more
likely to notice them.</p>
<p class="p">Use callouts when you need to emphasize important information without relying on custom
HTML or plain bold text. You can create callouts directly from the article editor
toolbar without using custom code</p>
<p class="p">The article editor supports Info, Warning, Error, and Tip callout types.</p>
<div class="p">
<img class="image" id="topic_jtl_v3q_zjc__image_d31_r42_1kc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-callouts-ui.png" width="600"><div class="note" id="topic_jtl_v3q_zjc__note_xsl_qqg_bkc">
<span class="notetitle">Note:</span> To customize the
callouts component in your theme, see "Customize callouts in the article editor" in
the <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408832681626" target="_blank">Help center templating
cookbook</a>.</div>
</div>
<p class="p">This article contains the following topics:</p>
<ul class="ul" id="topic_jtl_v3q_zjc__ul_yhk_3tc_1kc">
<li class="li"><a class="xref" href="#topic_obx_c42_1kc">Creating callouts in the article editor</a></li>
<li class="li"><a class="xref" href="#topic_kh4_d42_1kc">Working with callouts in the article editor</a></li>
</ul>
</div>
<div aria-labelledby="ariaid-title2" class="topic nested1" id="topic_obx_c42_1kc">
<h2 class="title topictitle2" id="ariaid-title2">Creating callouts in the article editor</h2>
<div class="body">
<p class="p">Create a callout when you want to emphasize important information in a visually
distinct block.</p>
<p class="p">Before you begin, decide what type of message you want to highlight. For example, use
a warning-style callout for cautionary information or a tip-style callout for
helpful guidance.</p>
<p class="p">Callouts are most effective when used sparingly. If too many callouts appear in the
same article, they become less noticeable and can make the article harder to
read.</p>
<div class="p">
<strong class="ph b">To create callouts in the article editor</strong><ol class="ol" id="topic_obx_c42_1kc__ol_wn3_hyc_1kc">
<li class="li">In <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9041943683354#topic_dzz_4wn_s2c" target="_blank">help center</a> or <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9041943683354#topic_b5q_nwn_s2c" target="_blank">Knowledge admin</a>, create a new
article or edit an existing article.</li>
<li class="li">Place the cursor where you want the callout to appear.</li>
<li class="li">Click the <strong class="ph b">Article components</strong> button (<img class="image" id="topic_obx_c42_1kc__image_fft_k3h_kjc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/Article-components-button.png" width="35">) on the article editor toolbar and
select <strong class="ph b">Callout</strong>.<p class="p">The callout component appears as an Info type
callout in edit mode.</p>
<p class="p"><img class="image" id="topic_obx_c42_1kc__image_wtg_h1d_1kc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-callout-new-edit.png" width="600"></p>
</li>
<li class="li">To change the callout type, click in the <strong class="ph b">Callout type</strong> field, then
select a new type from the list (Info, Warning, Error, or Tip).<p class="p"><img class="image" id="topic_obx_c42_1kc__image_xmx_nq2_1kc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-callout-callout-type-field.png" width="200"></p>
</li>
<li class="li">Type the content of your callout message in the text field.</li>
<li class="li">Click <strong class="ph b">Save</strong>.</li>
</ol>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title3" class="topic nested1" id="topic_kh4_d42_1kc">
<h2 class="title topictitle2" id="ariaid-title3">Working with callouts in the article editor</h2>
<div class="body">
<p class="p">Once you create a callout component, you can move or delete the callout, or add a
line return before or after the callout in the article editor. </p>
<p class="p"><strong class="ph b">To work with callout components in the article editor</strong></p>
<ol class="ol" id="topic_kh4_d42_1kc__ol_ywx_5nd_1kc">
<li class="li">In <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9041943683354#topic_dzz_4wn_s2c" target="_blank">help center</a> or <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9041943683354#topic_b5q_nwn_s2c" target="_blank">Knowledge admin</a>, edit an existing
article that contains a callout component.</li>
<li class="li">Hover over the callout component in the article editor to expose the
controls.<p class="p"><img class="image" id="topic_kh4_d42_1kc__image_u5y_z4d_1kc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-callout-controls.png" width="600"></p>
</li>
<li class="li">If you want to:<ul class="ul" id="topic_kh4_d42_1kc__ul_jhb_brd_1kc">
<li class="li">
<strong class="ph b">Add a space</strong> between the callout component and the previous line
or following line, click the return icon (<img class="image" id="topic_kh4_d42_1kc__image_yvj_zqd_1kc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-accordion-return.png" width="18">) above or below the
component.</li>
<li class="li">
<strong class="ph b">Move the callout</strong> component elsewhere in the article, click and
drag the handlebar icon (<img class="image" id="topic_kh4_d42_1kc__image_igm_dsd_1kc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-accordion-handlebar.png" width="16">) to a new location.</li>
<li class="li">
<strong class="ph b">Delete the callout component</strong>, click the handlebar icon (<img class="image" id="topic_kh4_d42_1kc__image_whb_hsd_1kc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-accordion-handlebar.png" width="16">) to select the component, then
press <strong class="ph b">Delete</strong> on your keyboard.</li>
</ul>
</li>
<li class="li">Click <strong class="ph b">Save</strong>.</li>
</ol>
</div>
</div>
<script id="docs-schema-markup" type="application/ld+json">{
"@context": "https://schema.org",
"@type": "TechArticle",
"@id": "https://support.zendesk.com/hc/en-us/articles/11042727986330",
"url": "https://support.zendesk.com/hc/en-us/articles/11042727986330",
"headline": "Using callouts to highlight content in the article editor",
"description": "You can add, move, or delete styled callout blocks in the article editor to highlight warnings, tips, reminders, or other important information.",
"articleSection": "Product help",
"datePublished": "2026-07-22T19:59:52+00:00",
"dateModified": "2026-07-30T12:14:04.693391+00:00",
"inLanguage": "en",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://support.zendesk.com/hc/en-us/articles/11042727986330"
},
"author": {
"@type": "Organization",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
},
"publisher": {
"@type": "Organization",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
},
"isPartOf": {
"@type": "WebSite",
"name": "Zendesk Help",
"@id": "https://support.zendesk.com/hc/"
},
"about": {
"@type": "SoftwareApplication",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
}
}</script><script id="ai-summary-script">
//<![CDATA[
const ai_summary_style = document.createElement('style');
ai_summary_style.innerHTML = `#styled-article-body{padding:0 0 0}#article-body #docs-ai-summary{background-color:#f3f3f3;border:1px solid #d3d3d3;padding:10px 10px 6px;margin-bottom:16px}#article-body #docs-ai-summary #docs-ai-summary-toggle{font-size:.9em;font-weight:700;margin-bottom:4px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}#article-body #docs-ai-summary #docs-ai-summary-toggle #up-triangle{margin-left:auto;padding-right:10px;display:none}#article-body #docs-ai-summary #docs-ai-summary-toggle #down-triangle{margin-left:auto;padding-right:10px}#article-body #docs-ai-summary #docs-ai-summary-content{font-size:.9em;padding-left:25px;padding-right:25px;margin-bottom:12px}`;
document.head.appendChild(ai_summary_style);

const toggleAISummary = () => {
const summary = document.getElementById("docs-ai-summary-content");
const upTriangle = document.getElementById("up-triangle");
const downTriangle = document.getElementById("down-triangle");
if (summary.style.display === "none") {
summary.style.display = "block";
upTriangle.style.display = "none";
downTriangle.style.display = "inline";
} else {
summary.style.display = "none";
upTriangle.style.display = "inline";
downTriangle.style.display = "none";
}
};

document.getElementById("docs-ai-summary-toggle").addEventListener("click", toggleAISummary);
//]]>
</script>
</body>