--- title: Callout slug: docs/callout description: Is there something super important your users need to know? A callout is your megaphone. docTags: createdAt: 2024-07-24T11:14:45.104Z --- ![](https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-bfoxdxKthix6HFJHa4V3v-20240814-212217.png) Think of a **callout** as a tiny, attention-seeking spotlight for your most important or interesting content. It's like a digital sticky note that screams, *"Hey, look at me!"* It's a versatile block that can be used to highlight tips, warnings, best practices, or just about anything you want to emphasize. ## Why to use callouts? - **Highlight Key Information** Is there something super important your users need to know? A callout is your megaphone. - **Provide Helpful Tips** Want to be the documentation hero? Drop some helpful tips in callouts. - **Warn About Potential Issues** Prevent user tears by using callouts for warnings. - **Add a Touch of Personality** Callouts can be your secret weapon for injecting some personality into your docs. With custom colors, they can even wear your brand. :::hint{type="info"} **😎 Pro Tip** Use callouts sparingly. Too many and they lose their impact. It's like shouting at someone - it works for a while, but then it just gets annoying. ::: ## How to use the callout block? ::::::WorkflowBlock :::WorkflowBlockItem Type `/` to open Archbee block menu ::: :::WorkflowBlockItem Search for **Callout** block and click to insert it ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/rmmCrcCzYBdzpbg-OVw2s_image-1790936359956.png) ::: :::::WorkflowBlockItem Hover over the callout to reveal its menu in the **top-right corner**, then choose the callout style - **ℹī¸ Info** — For general information, tips, or quick facts. - **✅ Success** — To celebrate accomplishments, highlight positive outcomes, or simply spread good vibes. - **⚠ī¸ Warning** — To alert users to potential issues, cautionary notes, or important considerations. - **🛑 Danger** — For critical alerts, urgent messages, or situations that require immediate attention. - **📄 Note** — A neutral, gray callout for content that should stand out from body text without implying a tone, like examples, side notes, or context. ::::VerticalSplit{layout="middle"} :::VerticalSplitItem * **🎨 Custom color** — Pick one of your brand colors or enter any hex code. Archbee generates the matching background tint automatically, so the accent bar and fill always stay in harmony. ::: :::VerticalSplitItem ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/AekoJKO142x9jhNmi133R_image-1790936371669.png) ::: :::: Hover over each option to see a tooltip with its name. ::::: :::WorkflowBlockItem Feel free to add your content. You can style the content however you like using the [WYSIWYG Menu](docId\:WBvFMF8cfYoJgkqNrJVIG) or even insert other blocks, like: - [Headings](docId\:CH1EclxGmlPa-XaZAwY6u) - [Expandable Headings](docId\:aJpn6HeMcswfb9RR4hDHZ) - [Lists](docId\:D02_VQ5GNbt-SUeqoTQ3g) - [Button](docId\:JDAXu7IBxBA1jW3KHOrOp) - [Horizontal Divider](docId\:YUthnHc9mNprZRTwXPB4L) - [File](docId\:t1Ky085LzcMKkp3H9EBA_) - [Image](docId\:MfIBZf9K-Ya8z3ldzQ37V) - [Video](docId\:B2Ip7DJZj3gHcRxc42rIL) ::: :::::: ## What you see is what you publish The callout menu lives **outside** the callout's text area. It only appears when you hover over the block, floating in the top-right corner, and it stays visible while you move your cursor toward it. That means a callout in edit mode looks exactly like it does in read mode. No toolbar inside the box, no extra spacing, no surprises when you hit publish. :::hint{type="note"} The block menu (drag handle, duplicate, delete and friends) appears on the left side when you hover over the callout block. ::: ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/Ada-uvd1QXJRMYmj7Sb1__image-1790936366478.png) ## Markdown Want to add callouts to your documentation directly through Markdown? We've got you covered! Archbee supports a specific Markdown syntax with triple colons (`:::`). Type `:::hint` followed by a `type` attribute to define the callout type: `info`, `success`, `warning`, `danger` or `note`. The older `style` attribute still works too. ```markdown :::hint{type="info"} Use info callouts for general information, tips, or quick facts. ::: :::hint{type="success"} Use success callouts to celebrate accomplishments. ::: :::hint{type="warning"} Use warning callouts for cautionary notes. ::: :::hint{type="danger"} Use danger callouts for critical alerts. ::: :::hint{type="note"} Use note callouts for neutral content, like examples or side notes. ::: ``` To use a custom color, set `type="custom"` and pass any hex code in `customColor`: ```markdown :::hint{type="custom" customColor="#7C3AED"} This callout uses a custom brand color. ::: ``` Alternatively, use this flavor of Markdown to generate a callout block: ```markdown :::hint{style="note"} some hint ::: ``` Check the [Use Markdown shortcuts](docId:9aaCRqJMq9JnYvzSgNOfs) page to see more markdown shortcuts for other blocks. ## Examples Here are some examples to show you the callout block: - **ℹī¸ Info** :::hint{type="info"} **ℹī¸ Did you know?** Archbee is so good, it'll make you question your life choices. Like, why didn't you start using it sooner? ::: - **✅ Success** :::hint{type="success"} **🎉 You did it!** You've mastered the art of callouts. Now go forth and create amazing documentation that will blow your competitors out of the water. ::: - **⚠ī¸ Warning** :::hint{type="warning"} **🚧 Heads up!** Using too many callouts can be distracting. Use them wisely, or your readers might start to ignore them altogether. ::: - **🛑 Danger** :::hint{type="danger"} **🚨 Uh-oh!** If you're seeing this, something has gone terribly wrong. đŸĢŖ Probably not with Archbee though, **we're perfect. 💅✨** Blame the coffee. ☕ī¸ ::: - **📄 Note** :::hint{type="note"} **📝 For the record** Not everything is a tip, a win, or a crisis. Some things just deserve a quiet little box of their own. ::: - **🎨 Custom color** :::hint{type="custom" customColor="#7C3AED"} **💜 On brand** Purple is our favorite. Pick yours from your brand colors, or paste any hex code. ::: :::hint{type="custom" customColor="#0D9488"} **🌊 Calm and collected** The background tint is generated from your color automatically. You pick one color, Archbee handles the rest. ::: :::hint{type="custom" customColor="#EA580C"} **đŸ”Ĩ Hot off the press** Perfect for release highlights, launch banners, or anything that should feel a little louder than info. ::: *** ::::LinkArray{contentSource="CUSTOM"} :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"} :FontAwesome[]{icon="fa-solid fa-cubes"} ** Find other blocks** Discover new ways and blocks to create stunning and functional documentation pages. [Editor Blocks](docId:6B0VTQTVUnMP93e-SZQ2p) ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"} :FontAwesome[]{icon="fa-solid fa-headset"}** Need help? âŦ‡ī¸** Use the **blue** **chat bubble **from bottom right corner. Or try **AI Chat** (from search box) for quick answers. ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"} :FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}** Your opinion matters** Use the below feedback form, anonymously. Or ask a question in **Q\&A section** and our team or AI will give you a solution. ::: ::::