--- title: Callout slug: test-archbee/callout description: Is there something super important your users need to know? A callout is your megaphone. docTags: createdAt: 2024-07-24T11:14:45.000Z --- ![](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. :::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 insert ::: :::WorkflowBlockItem 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. ![](https://api.archbee.com/api/optimize/HCIek7I0UxvyNHQ0EFzVX-zV7r0yId4A90qn1yY26dG-20250218-123012.png) ::: :::WorkflowBlockItem Feel free to add your content. You can style the content however you like using the [WYSIWYG Menu](#) or even insert other blocks, like: - [Headings](docId\:hfA9LT8L1mAixSPMs_JpB) - [Expandable Headings](docId\:MTFaLsx3QK7qdYHy0FeNa) - [Lists](docId\:xxSWw4KuAg09A-25Bb-ei) - [Button](docId\:sCzbjjNMDTXFEXb3ipWWf) - [Horizontal Divider](docId\:nvnt5NfPJEBhGSD-WocwI) - [File](docId\:Tx_-enKfyowr13mR_vQ_H) - [Image](docId\:XFfeje1mHdumOzvfG3naB) - [Video](docId\:xgWqCO_MRLDG4uh_qnz9Q) ::: :::: ![](https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-dS1JVN4jX6oHXj_iDiqIk-20240814-181528.png "Add callout block") ## Markdown Want to add callouts to your documentation directly through Markdown? We've got you covered you! Archbee supports a specific Markdown syntax with triple colons (`:::`). With this method, you simply type `:::hint` followed by an optional `style` attribute to define the callout type (info, warning, success or danger). Use the following Markdown to generate a callout block: ```markdown ## Hints :::hint{style="info"} We would love you to contribute to `@octokit/rest`, pull requests are very welcome! Please see CONTRIBUTING.md for more information. ::: :::hint{style="warning"} We would love you to contribute to `@octokit/rest`, pull requests are very welcome! Please see CONTRIBUTING.md for more information. ::: :::hint{style="success"} We would love you to contribute to `@octokit/rest`, pull requests are very welcome! Please see CONTRIBUTING.md for more information. ::: :::hint{style="danger"} We would love you to contribute to `@octokit/rest`, pull requests are very welcome! Please see CONTRIBUTING.md for more information. ::: ``` :::hint{type="info"} We would love you to contribute to `@octokit/rest`, pull requests are very welcome! Please see CONTRIBUTING.md for more information. ::: Alternatively, use this flavor of Markdown to generate a callout block. ```markdown :::hint{style="info"} some hint ::: ``` Check the [Use Markdown shortcuts](<././Use Markdown shortcuts.md>) 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. ☕ī¸ ::: *** ::::LinkArray :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"} ** Find other blocks** Discover new ways and blocks to create stunning and functional documentation pages. [Check out all blocks](<././Editor Blocks.md>) ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"} \&#xNAN;** 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"} \&#xNAN;** 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. ::: ::::