Markdown Custom Components Reference

Enhance your documentation with these powerful custom Markdown components. This guide covers syntax, usage examples, and best practices for each component type.

Table of Contents

• Tabs Component
• Cards Component
• Callouts
• Steps
• Accordions
• Icons
• File Downloads

Tabs Component

Organize related content into tabbed sections for better navigation and space efficiency.

Basic Syntax

Features

• defaultTab: Sets which tab opens by default
• TabList: Container for tab buttons
• TabPanel: Content container for each tab
• Supports full Markdown and HTML in content areas

Best Practices

• Limit to 3-5 tabs for usability
• Use clear, concise tab labels
• Keep tab content focused and related

Cards Component

Create flexible card layouts for displaying related items in a grid.

Basic Syntax

Card Properties

We recommend using Lucide icons for consistency. Browse all available icons, but you can use <img/> tags with external or internal images as well.

Callouts

Highlight important information with styled notice boxes.

Types Available

Helpful suggestion

Helpful suggestion

Potential issue

Potential issue

Critical information

Critical information

Warning message

Warning message

Additional context

Additional context

Customization

Pro Tip

Use tabs to organize related content

• Keep content concise
• Limit to 3-5 tabs

Steps

Create step-by-step instructions or workflows.

Syntax Example

Accordions

Collapsible content sections for organizing information.

Implementation

Solo

Icons

Use Lucide icons in your Markdown.

Usage

Browse all available icons

File Downloads

Link to downloadable resources.

Syntax

Download ZIP - Project files

Open API

As images or links you can use the <OpenAPI /> component to display OpenAPI specifications for local or remote files, here's an example of how to use it:

As Strapi do not support yaml files, you can convert your OpenAPI yaml files to json using online tools or command line utilities or refer to remote files directly.

Best Practices

1. Consistency

   • Use the same component style throughout your docs
   • Maintain uniform heading levels

2. Accessibility

   • Always include alt text for images
   • Use descriptive link text

3. Organization

   • Group related components together
   • Use components purposefully, not decoratively