UI Components (Tabs, Accordion, etc.)

Syntax

Use a blockquote starting with [!TYPE] where TYPE is one of: NOTE, TIP, IMPORTANT, WARNING, or CAUTION.

> [!NOTE]
> Useful information that users should know, even when skimming content.

> [!TIP]
> Helpful advice for doing things better or more easily.

> [!IMPORTANT]
> Key information users need to know to achieve their goal.

> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.

> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.

Live Demo

With Rich Content

Callouts support full Markdown formatting inside:

> [!TIP]
> You can include **bold**, *italic*, and `code` in callouts.
>
> - Lists work too
> - Multiple items
>
> And even [links](https://example.com) and code blocks:
>
> ```java
> System.out.println("Hello!");
> ```

System.out.println("Hello!");

Syntax

Use a blockquote with the [!TABS] marker and a bullet list:

> [!TABS]
> - First Tab
>
>   Content of the **first tab** with Markdown formatting.
>
> - Second Tab
>
>   Content of the *second tab*.
>
> - Third Tab
>
>   Content with `code` and [links](url).

How it works:

• Start a blockquote with > [!TABS] followed by optional parameters
• Use a bullet list (- or *) for each tab
• The first line of each list item becomes the tab heading (supports inline Markdown/HTML)
• Add a blank line, then the tab content with full Markdown support

Available options:

Live Demo

Justified Tabs

Vertical Tabs

Code Tabs

A common use case for tabs in technical documentation is showing the same code example in multiple programming languages. Combine tabs with fenced code blocks:

> [!TABS]
> - Java
>
>   ```java
>   public class HelloWorld {
>       public static void main(String[] args) {
>           System.out.println("Hello, World!");
>       }
>   }
>   ```
>
> - Python
>
>   ```python
>   def main():
>       print("Hello, World!")
>
>   if __name__ == "__main__":
>       main()
>   ```
>
> - JavaScript
>
>   ```javascript
>   function main() {
>     console.log("Hello, World!");
>   }
>
>   main();
>   ```

Live Demo:

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

def main():
    print("Hello, World!")

if __name__ == "__main__":
    main()

function main() {
  console.log("Hello, World!");
}

main();

Syntax

Use a blockquote with the [!ACCORDION] marker and a bullet list:

> [!ACCORDION]
> - First Panel Title
>
>   Content of the **first panel** with Markdown formatting.
>
> - Second Panel Title
>
>   Content of the *second panel*.
>
> - Third Panel Title
>
>   Content with `code` and [links](url).

How it works:

• Start a blockquote with > [!ACCORDION] followed by optional parameters
• Use a bullet list (- or *) for each panel
• The first line of each list item becomes the panel heading; inline Markdown/HTML formatting in this line is preserved
• Add a blank line, then the panel body content with full Markdown support

Available options:

Live Demo

With Options

> [!ACCORDION close-others=false, is-open=1]
> - Panel One
>
>   This accordion allows multiple panels open at once.
>
> - Panel Two (Open by Default)
>
>   This panel is open by default because `is-open=1`.

Syntax

Use a blockquote with the [!COLLAPSIBLE] marker, followed by the title on the next line:

> [!COLLAPSIBLE]
> Click to expand this section
>
> This content will be **hidden by default** and can be revealed
> by clicking the title. You can use all Markdown formatting:
>
> - Lists work perfectly
> - Including **bold** and *italic* text
> - And [links](https://example.com) too
>
> Even code blocks are supported.

How it works:

• Start a blockquote with > [!COLLAPSIBLE] (no additional parameters are currently supported)
• Put the title on the next line of the same blockquote
• Add a blank line (> alone) to separate the title from the content
• All following paragraphs in the blockquote become the collapsible content
• Standard Markdown formatting is fully supported inside

Live Demo

What is Sentry Maven Skin?

How do I install it?

Syntax

Use a blockquote with the [!CAROUSEL] marker and a list of images:

> [!CAROUSEL]
> * ![First image description](images/slide1.png)
> * ![Second image description](images/slide2.png)
> * ![Third image description](images/slide3.png)

How it works:

• Start a blockquote with > [!CAROUSEL] followed by optional parameters
• Use a bullet list (- or *) for each slide
• Each list item contains an image using standard Markdown syntax: ![alt text](path)
• The alt text becomes both the image description and the carousel caption

Available options:

Live Demo

Desktop View: Clean, professional layout

Dark Mode: Automatic theme detection

Built-in Search: No external services needed

With Options

> [!CAROUSEL interval=3000, no-wrap=true]
> * ![First slide](images/slide1.png)
> * ![Second slide](images/slide2.png)