Panels for Info, Warning, Note, and More in the editor

Such a small improvement that could improve the use of the wiki drastically!

A big up from our team!

@Ian Link , I’m not really sure how useful this could be for your company. But I’m missing these panels really hard and could often help me to focus users on specific content. Reading cards and documentation needs to be as user friendly as possible. If they read a work instruction but often forget the same steps, I’m using HTML markdown to help to them find the instruction they need.

Meanwhile, I am crossing my fingers that Guru has considered incorporating this feature into their roadmap, thereby enhancing the knowledge base application to cater not only to technical users but a broader audience as well. For your convenience, the HTML codes can be found at the bottom of this post.

<div style="border-left: 8px solid blue; padding: 16px; border-radius: 4px;">
<span style="font-size: 18px; font-weight: bold; color: #333;">🔎 INFO</span>
<p style="margin-top: 8px;">This is the content of the information box. You can put any text or other HTML elements here.</p>
<ul style="margin-top: 8px; list-style: disc; padding-left: 20px;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>

<div style="border-left: 8px solid orange; padding: 16px; border-radius: 4px;">
<span style="font-size: 18px; font-weight: bold; color: #333;">⚠️ WARNING</span>
<p style="margin-top: 8px;">This is a warning message. Pay attention to this important information.</p>
<ul style="margin-top: 8px; list-style: disc; padding-left: 20px;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>

<div style="border-left: 8px solid #ff0000; padding: 16px; border-radius: 4px;">
<span style="font-size: 18px; font-weight: bold; color: #333;">🛑 ERROR</span>
<p style="margin-top: 8px;">An error has occurred. Please try again later or contact support.</p>
<ul style="margin-top: 8px; list-style: disc; padding-left: 20px;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>

<div style="border-left: 8px solid #00cc00; padding: 16px; border-radius: 4px;">
<span style="font-size: 18px; font-weight: bold; color: #333;">💡 TIP </span>
<p style="margin-top: 8px;">Here's a helpful tip to improve your experience.</p>
<ul style="margin-top: 8px; list-style: disc; padding-left: 20px;">
<li>Tip 1</li>
<li>Tip 2</li>
<li>Tip 3</li>
</ul>
</div>

@Maarten Van der Straeten I love the designs! I might borrow them  We’re using the suggested Guru’s markdown custom banners but we added round corners to make them more visually appealing, bigger font for main text and headlines only when we really want to highlight the content of the banner:

It would be spectacular to have the option to add a callout without the need to use html code, especially when we’re adding bullet point or numbered lists.

I won’t even go into details of having an Update log with collapsible table inside of the markdown, took me some time to figure out the best way to do it and then save the precise instructions on adding and amending the Update log for our Authors that have no coding experience at all. I can only thank my own initiative to do a coding course so I know how to do these things and make our cards better with the markdowns

@Lucia Delicova We are also waiting for a collapsible content feature, but I think you would need to combine HTML with classes and scripts to make this work. This is probably beyond the markdown capabilities in the editor. 

@Maarten Van der Straeten true, depends on what kind of content you intend to get under the “toggle”. For us, at the moment, it is only a simple table with max 4 rows of updates that is on top of the card although I could see a potential of using it within the card content more, similarly to Notion

Getting the callouts would already be a huge improvement and would save us plenty of time on cards creation, hopefully Guru picks this up soon.

Just a thought here in case this helps, currently, we use the HTML details element in Markdown like: 

<details>
<summary>Collapsed Content</summary>
<p>content</p>
</details>

This is very exciting!